将 div 附加到特定元素答案

【问题标题】：Append div to specific element将 div 附加到特定元素
【发布时间】：2015-01-23 21:06:21
【问题描述】：

单击图标时，我试图在列表组项下方显示一条消息。这是我必须显示我的列表的代码

<ul class="list-group">
<li class="list-group-item">Feed dog <span class="edit glyphicon glyphicon-edit" data-id="1"></span></li>
<li class="list-group-item">Email work <span class="edit glyphicon glyphicon-edit" data-id="2"></span></li>
</ul>

使用此代码检测到图标点击

 $("li").on("click", ".edit", function() {
    var id = $(this).data("id");
     //do something
 })

我要使用的代码如下，但我不知道如何选择正确的元素

$(".list-group data1").append("<li id=\"detailsitem\" class=\"list-group-item list-group-item-info\">To be appended</li>");

所以如果 id = 1 则显示在第一个 li 下方，如果 id = 2 显示在第二个下方等等。

如何确保消息插入到正确的 li 下方？

【问题讨论】：

当一个图标被点击后，你还不太清楚你想做什么。请给我们一个给定点击的最终结果样本。
对于您的情况，您应该使用子列表或一个div 作为选定的父列表项，将准备好的标记附加到选定的li.list-group-item。
点击图标后，html 应附加在相应的 li 下方（见上文）
很确定您希望使用$('.list-group > span[data-id=id]').append(... 来定位它，其中 id 是您在 jQuery 的初始位中获得的值。您尝试定位它的方式不起作用，因为 data1 会导致它查找名为 data1 的元素。
我知道就是这个例子，因为我不知道！

标签： jquery html twitter-bootstrap append

【解决方案1】：

如何确保消息插入到正确的 li 下方？被点击的 li 和你要发布结果的地方必须有相同的 id，看下面的例子，例如在 li 中添加 id 字段：

  <li class="list-group-item" id="1">Feed dog <span class="edit glyphicon glyphicon-edit"


   id="1">   

   </span></li>

  <script>
  $('.list-group-item').click(function(){


  var id=$(this).attr(id);  // get the id of the clicked div
 $('.box#'+id).append('whatever');</script>  // append whatever you want to the div with same id as the  clicked div

【讨论】：

【解决方案2】：

你可以这样做：

$('.edit').click(function(){

        $(this).parent().after('<li id=\"detailsitem\" class=\"list-group-item list-group-item-info\">To be appended</li>')

});

【讨论】：

在您的示例中，每个功能都不是必需的；）
我不知道，因为我不知道操作者真正想要什么^^