Javascript 如何确定要插入div的列表中的位置

在我的应用程序中，我将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列表附加到一个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)

addAll:->
@options.muses.each（@addOne）
阿登：（缪斯）->
#渲染相应的缪斯卡
muse_card_template=$（“#mustache.muse_card”）.html（）
#卡片的html通过Mustach呈现
html=Mustache.to_html（muse_card_模板，muse.getMustacheJSON（））
#将生成的html追加到“muse\u card\u container”div
html=“
“+html+”
”
@$（'.muses\u card\u container'）。附加（html）

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

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

---

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

解决方案取决于您如何显示这些卡，因为我根据您的代码计算这些卡要么浮动，要么具有

显示：内联块

属性集。如果是这种情况，您可以尝试以下算法来确定在何处插入卡的描述：

想法是将卡片推到所选卡片的下方，为此，您应该在行中最后一张卡片之后插入一个新元素（也是浮动的或带有内联块），该元素应该具有卡片容器的宽度，以容纳整行并将卡片推到其下方。现在，您只需确定在哪张卡之后插入此“pusher元素”：假设所有卡的宽度相同，可以计算出您拥有多少列，然后获取单击卡的索引，获取该列并在该元素所在行的最后一张卡之后插入“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)

我还没有测试过这段代码，但你可能已经知道了

---

UPD：这里是一个工作示例

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

可以使用来检查位置、循环项目和/或移动展开的详细信息元素

核心代码

// 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);

//注意：“这”是被点击的卡片
//通过循环此li之后的项目来查找下一个最右边的li
var leftPos=this.offsetLeft；
var rightMost=$（此项）；
while（true）{
//接下一个李
var nextLi=最右边的.next（）；
if（nextLi.length==0 | | nextLi[0].offsetLeft假设这里可以使用JQuery

工作示例：（单击框了解详细信息）

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

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

.index（）
返回所有LIs列表中当前li的索引。（从零开始的位置）参考：

如果
numOfLIsInARow
是一行中的LI数，则
index-（index%numOfLIsInARow）+numOfLIsInARow-1
返回LI的位置，在该位置之后需要添加详细信息LI/DIV。您可以使用
.get（）
方法获取LI。
您可以使用HTML5数据属性（渲染引擎会忽略它们）如下所示：

你能把迭代循环放在你给出的代码周围吗？并给我们muse_卡片的HTML内容_template@popnoodles，我用预期的结果和更多的代码更新了原始帖子。HTML代码是必要的吗？我可以粘贴它，但不确定这会有什么帮助。现在除了你之外，没有人知道迭代这些内容的代码元素，这样只有您才能看到唯一标识符，只有您才能知道模板的HTML，这样只有您才能使用该标识符（他们看不到）来帮助您。♪没有人♪ ♫但是♫ ♪你♪为什么。每个都是。单击？你可以只调用
$（'li'）。单击（）
由于有多个li元素，所以返回了一个数组。我不完全确定是否可以调用单击数组，也不必费心去寻找它，只是假设不能调用单击数组。不过，我可能大错特错。
.click（）
与
.each（）
一样进行迭代。
$（'unique'）
将是一个数组，即使只有一个元素。
$（'unique'）。您不会这样做。
$（'unique'）。每个（函数（）{$（this）。单击（函数（）{…}）；}）
无论哪种方式，这只是告诉您单击的元素，而不是根据问题显示扩展内容的位置
// 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);

<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)
    }
})