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

EN

这里假设您可以使用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。

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

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

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

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

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

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/的工作示例