如何遍历元素列表中的dom树

Question

我有看起来像这样的HTML代码段。 我从后端多次生成此代码段。 当我单击“保存”按钮时，我捕获到使用$（this）选择器单击了哪个“保存”按钮。 现在，我想获取相应“保存”按钮的属性item-id。 我有以下jquery代码段。 但这行不通。 我试图看一下，但不知道错误在哪里。

<td><input type="text" size="10" value="val1" item-id="id1"></td>
<td><input type="text" value="val2" size="4"></td> 
<td>
  <button class="btn btn-primary save-btn">Save</i></button>
</td>

这是jquery片段

 $(".save-btn").click(function(){
        var ems = $(this).parent().siblings();
       var item_id = ems[0].child().attr("item-id");
   }

Answer 1

最好将item-id =“ id1”替换为数据属性html5 data-id =“ id1”，然后将代码attr（'item-id'）替换为data（'id'）...

 $(document).on('click','.save-btn', function(){ var ems = $(this).parent().siblings(), item_id = ems.eq(0).children('input').attr("item-id"); alert(item_id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input type="text" size="10" value="val1" item-id="id1"></td> <td><input type="text" value="val2" size="4"></td> <td> <button class="btn btn-primary save-btn"><i>Save</i></button> </td> </tr> </table> 

Answer 2

click不适用于动态添加的元素。您需要使用on('click') 。 也没有方法.child()所以您需要使用.children().first() 。

这是更正的代码：

$(document).on('click', '.save-btn', function(){
   var ems = $(this).parent().siblings();
   var item_id = ems.children().first().attr("item-id");
});

 // The text var text=""; text += "<td><input type=\\"text\\" size=\\"10\\" value=\\"val1\\" item-id=\\"id1\\"><\\/td>"; text += "<td><input type=\\"text\\" value=\\"val2\\" size=\\"4\\"><\\/td> "; text += "<td>"; text += " <button class=\\"btn btn-primary save-btn\\">Save<\\/i><\\/button>"; text += "<\\/td>"; // Adding the text to html $('body').html(text); $(document).on('click', '.save-btn', function(){ var ems = $(this).parent().siblings(); console.log(ems); var item_id = ems.children().first().attr("item-id"); alert(item_id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>