Question

单击图标时，我试图在list-group-item下面显示一条消息。这是我必须显示列表的代码

<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？

下方

Answer 1

你可以这样做：

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

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

});

Answer 2

如何确保邮件插入正确的li下方？单击的li和您要发布结果的位置必须具有相同的ID，请参阅以下示例，将id字段添加到li，例如：

  <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

将div附加到特定元素

2 个答案: