首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何识别列表中的位置以插入div

如何识别列表中的位置以插入div
EN

Stack Overflow用户
提问于 2013-01-05 12:07:56
回答 5查看 364关注 0票数 3

在我的应用程序中,我将div (html)列表附加到父div容器

代码语言:javascript
运行
复制
muse_card_template = $("#mustache.muse_card").html()
html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())

html = "<li class=''>" + html + "</li>"
@$('.muses_card_container').append (html)

代码语言:javascript
运行
复制
//div to which I append my cards
.content
  %ul.muses_card_container

因此,本质上我只是将一个div列表附加到一个div,并通过设置容器的宽度来包装它。

我的意图是在我点击后展开卡片的详细内容,展开的视图应该显示在被点击的卡片的正下方(在下面展开)。

但是,目前我没有任何关于在何处插入扩展内容的参考,因为我只有一个div列表。

有没有什么库可以用来标识插入新div的位置?或者我可以做的任何代码更改,以使其工作?

编辑:

添加了预期结果

这样做的挑战是,当用户单击图像时,我不知道在哪里插入展开的内容。

我循环HTML图像卡的代码如下:

代码语言:javascript
运行
复制
addAll: ->
  @options.muses.each(@addOne)

addOne: (muse) ->
  #render corresponding muse cards
  muse_card_template = $("#mustache.muse_card").html()

  #html for cards are rendered via Mustach
  html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())

  #append resulting html to 'muse_card_container' div
  html = "<li class=''>" + html + "</li>"
  @$('.muses_card_container').append (html)
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-01-13 21:04:51

这里假设您可以使用JQuery。

工作示例:http://jsfiddle.net/UgBmf/2/ (单击方框查看详细信息)

要知道在哪里插入详细信息,我们首先需要知道所单击的li

event.target为我们提供了在我的代码中单击的li。(因为我将click处理程序添加到ul中,而不是添加到每个li中)

.index()返回当前li在所有li列表中的索引。(基数为零的位置)参考:http://api.jquery.com/index/

如果numOfLIsInARow是一行中LI的数量,则index - (index % numOfLIsInARow) + numOfLIsInARow - 1返回LI的位置,在该位置之后需要添加细节LI/DIV。您可以使用.get()方法获取LI。

票数 2
EN

Stack Overflow用户

发布于 2013-01-05 12:50:03

我猜你已经有jQuery了。将click事件处理程序附加到每个li元素。当click事件被激发时,事件对象将具有有关单击来源的详细信息。

代码语言:javascript
运行
复制
$(document).ready(function(){
  $('li').each(function(index, element){    
    $(element).click(function(event){     
      $('#text').text($(event.target).html());
    });
  });
});

看看这个code snippet。单击右侧窗格中的数字,您将看到您单击的数字显示在下面的标签中。

票数 4
EN

Stack Overflow用户

发布于 2013-01-09 03:22:50

解决方案取决于您如何显示这些卡片,因为我从您的代码中推断出这些卡片要么浮动,要么设置了display:inline-block属性。如果是这种情况,那么您可以尝试以下算法来确定插入卡的描述的位置:

这个想法是将卡片推到选定的卡片下面,为此,你应该在一行中的最后一张卡片之后插入一个新的元素(也是浮动的或带有内联块的),这个元素应该有卡片容器的宽度,以获取整行并将下面的卡片推入其中。现在你需要做的就是决定在哪张卡片之后插入这个"pusher- element ":假设所有的卡片都有相同的宽度,可以计算出你有多少列,然后得到被点击的卡片的索引,得到它的列,并在这个元素所在行的最后一张卡片之后插入"pusher“。

代码语言:javascript
运行
复制
elementsInColumn = 4 # you should calculate it based on cards and container width 
$('.muses_card_container li').click ->
    index = $('.muses_card_container li').index(this)
    indexInColumn = index % elementsInColumn # get card index in column (0..elementsInColumn-1)
    lastCardInColumnIndex = index + (elementsInColumn - indexInColumn) #
    lastCardInColumn = $('.muses_card_container li').get(lastCardInColumnIndex)
    $(expandedContentHTML).insertAfter(lastCardInColumn)

我还没有测试过这段代码,但是您可能已经明白了

更新:下面是http://jsfiddle.net/azgSX/1/的工作示例

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14168482

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档