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

【问题标题】：How to identify position in a list to insert div如何识别列表中的位置以插入 div
【发布时间】：2013-01-05 04:07:56
【问题描述】：

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

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)

//div to which I append my cards
.content
  %ul.muses_card_container

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

我的本意是点击后展开卡片的详细内容，展开后的视图应该会显示在被点击的卡片正下方（展开内联下方）。

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

是否有任何库可用于识别插入新 div 的位置？或者我可以做任何代码更改来完成这项工作？

编辑：

添加预期结果

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

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

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)

【问题讨论】：

你能把迭代循环放在你给出的代码周围吗？并给我们 muse_card_template 的 HTML 内容
@popnoodles，我用预期的结果和更多代码更新了原始帖子。是否需要 HTML 代码？我可以粘贴它，但不确定会有什么帮助。
现在没有人知道迭代这些元素的代码，所以没有人可以看到唯一标识符，没有人知道模板的 HTML，所以没有人可以使用该标识符（他们看不到）来帮助你。
♪没人♪ ♫但是♫ ♪你♪

标签： javascript list html reference position

【解决方案1】：

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

$(document).ready(function(){
  $('li').each(function(index, element){    
    $(element).click(function(event){     
      $('#text').text($(event.target).html());
    });
  });
});

看看这个code snippet。点击右侧窗格中的数字，您会看到您点击的数字显示在下方的标签中。

【讨论】：

为什么是 .each 然后 .click？你可以$('li').click()
嗯，返回一个数组，因为有多个 li 元素。我不完全确定我是否可以在数组上调用点击并且从不费心去寻找它，只是假设一个人不能在数组上调用点击。不过我可能大错特错。
.click() 迭代就像.each() 一样。 $('#unique') 将是一个数组，即使只有一个元素。你不会这样做$('#unique').each(function(){$(this).click(function(){...});});
无论哪种方式，这只是告诉您单击的元素，而不是根据问题显示扩展内容的位置

【解决方案2】：

这里假设你可以使用 JQuery。

工作示例：http://jsfiddle.net/UgBmf/2/（点击方框查看详情）

要知道在哪里插入细节，我们首先需要知道被点击的li

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

.index() 返回我们当前 li 在所有 LI 列表中的索引。（基于零的位置）参考：http://api.jquery.com/index/

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

【讨论】：

【解决方案3】：

解决方案取决于您如何显示这些卡片，因为我从您的代码中假设这些卡片要么浮动，要么具有display:inline-block 属性集。如果是这种情况，那么您可以尝试以下算法来确定在哪里插入卡的描述：

想法是将卡片推到所选卡片下方，为此您应该在行中的最后一张卡片之后插入一个新元素（也可以浮动或使用内联块），该元素应具有卡片容器的宽度拿走整行并将卡片推到它下面。现在你只需要确定在哪张卡片之后插入这个“推动元素”：假设所有卡片的宽度相同，可以计算你有多少列，然后得到点击卡片的索引，得到它列并在此元素所在行的最后一张卡片之后插入“推杆”。

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)

我没有测试过这段代码，但你可能明白了

UPD：这是工作示例http://jsfiddle.net/azgSX/1/

【讨论】：

【解决方案4】：

最简单的方法是找到位于您单击的项目之后最右侧的项目，因为它将位于当前行的末尾，您可以在此之后移动详细信息。这也意味着您不需要每行设置一定数量的卡片，因此可以使用不同的屏幕尺寸。

您可以使用offsetLeft 检查位置，使用next() 循环遍历项目，使用detach()/insertAfter() 移动展开的详细信息元素。

核心代码

// Note: 'this' is the card which got clicked

// find next right-most li by looping the items after this one
var leftPos = this.offsetLeft;
var rightMost = $(this);

while (true) {
  // get the next li
  var nextLi = rightMost.next();
  if (nextLi.length == 0 || nextLi[0].offsetLeft <= leftPos) {
    // if we have reached the end one or the next li is farther left, we are at the end of the row
    break;
  } else {
    // nextLi is currently the furthest right
    rightMost = nextLi;
  }
}

// move details from its current place to after the end of the row
var detailsLi = $('#details');
detailsLi.detach();
detailsLi.insertAfter(rightMost);

http://jsfiddle.net/7dGfg/2/ 的基本工作示例这使用了 Alexander 的示例中的 LI，但同样的原则也适用于 div，只要每张卡片的大小相同。

【讨论】：

【解决方案5】：

您可以像这样使用 HTML5 数据属性（它们被渲染引擎忽略）：

<div id="mustache" class="muse_card" data-row="2" data-bottom="false"></div>

和

$("#mustache.muse_card").click(function(){
    if(this.get()[0].getAttribute('data-bottom'])){ // only insert the content on top if it is in the bottom row. 
        // Do something to insert the content in between this.get()[0].getAttribute('data-row') (in this case 2) and this.get()[0].getAttribute('data-row') +- (in this case 1)
    }else{ // This is not in the top row.
        // Do something to insert the content in between this.get()[0].getAttribute('data-row') (in this case 2) and this.get()[0].getAttribute('data-row') +1 (in this case 3)
    }
})

【讨论】：