Question

我正在尝试使用JQuery迭代表的项目，同时我需要检查是否选中了复选框。我使用以下代码：

$("input:checkbox:checked").each(function() {
    var name = $(".name").html();
    var city = $(".city").html();

    alert(name + " " +  city);
});

输入所在的tr的html结构：

<tr>
   <td><input type="checkbox" name="prove" class="prove"></td>
   <td class="name">Peter</td>
   <td class="city">New York</td>
</tr>
<tr>
   <td><input type="checkbox" name="prove" class="prove"></td>
   <td class="name">Andrew</td>
   <td class="city">Madrid</td>
</tr>

但我总是得到输出的第一个元素（当选中两个复选框时）：

Peter New York
Peter New York

如何让我的功能转到下一个tr，而不是始终显示第一个的数据？

提前致谢！

Answer 1

由于您使用.html()类选择器，它将始终从匹配元素的第一个元素中检索HTML内容。

您需要在this的当前元素上下文中进行迭代，使用.closest()遍历tr元素，然后使用.find()定位所需的td的。

$("input:checkbox:checked").each(function() {
    var tr = $(this).closest('tr');
    var name = tr.find(".name").html();
    var city = tr.find(".city").html();
    alert(name + " " +  city);
});

Answer 2

$('button').click(function() {

var obj = $(".prove:checked").map(function() {
    var tr = $(this).closest('tr');
    var name = tr.find('td.name').text();
    var city = tr.find('td.city').text();
    return name + ' ' + city;
}).get();
console.log(obj);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
   <td><input type="checkbox" name="prove" class="prove"></td>
   <td class="name">Peter</td>
   <td class="city">New York</td>
</tr>
<tr>
   <td><input type="checkbox" name="prove" class="prove"></td>
   <td class="name">Andrew</td>
   <td class="city">Madrid</td>
</tr>
  </table>

<button>click</button>

Answer 3

尝试使用jquery中的.siblings()和$(this)来获取jquery中的当前对象

$("input:checkbox:checked").each(function() {
    var name = $(this).parent().siblings('.name').text();
    var city = $(this).parent().siblings('.city').text();
     alert(name + '' + city);
});

Answer 4

或

$("input[type=checkbox]:checked").each(function() {
    var tr = $(this).parent();
    var name = tr.find(".name").html();
    var city = tr.find(".city").html();

    alert(name + " " +  city);
});

如何使用JQuery迭代表的项目？

4 个答案: