javascript - 如何确定列表中的位置以插入 div

Question

在我的应用程序中，我将一个 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 并通过设置容器的宽度来包装它。

我的意图是在点击后展开卡片的详细内容，展开后的 View 应该显示在被点击卡片的正下方(expand inline below)。

但是目前我没有任何关于在哪里插入扩展内容的引用，因为我只有一个 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)

Answer 1

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

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

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