jQuery <tr> <table> 使用 .find() 方法获取具有不同类的内部



我试图使用jQuery返回我的数据表中检查的所有行。如果span class="checked"(第一行和第三行)和未选中span class="(第二行),则选中一行。是否有一种使用jQuery .find()方法返回所有行的快捷方式?而不是通过所有的行迭代和比较跨度类属性?

我知道我可以使用find()来获取所有的行。但是是否有一种方法来定义jQuery查找方法中的内部元素?

<table id="myTable">
<tr>
    <td>
        <div class="checker">
            <span class="checked">
                <input type="checkbox" value="1" class="checkboxes">
            </span>
        </div>
    </td>
    <td> blah
    </td>
</tr>
<tr>
    <td>
        <div class="checker">
            <span class="">
                <input type="checkbox" value="1" class="checkboxes">
            </span>
        </div>
    </td>
    <td> blah
    </td>
</tr>
<tr>
    <td>
        <div class="checker">
            <span class="checked">
                <input type="checkbox" value="1" class="checkboxes">
            </span>
        </div>
    </td>
    <td> blah
    </td>
</tr>
</table>

您可以使用:has选择器或has方法:

$('#myTable').find('tr:has(span.checked)');

或:

$('#myTable tr').has('span.checked');

你应该使用" closest ":

$('#myTable .checked').closest('tr')

你可以直接测试复选框是否被选中

$('#myTable input[type="checkbox"]:checked').closest('tr')

这是我使用.closest().find()的解决方案

$(document).ready(function(){
    $(".checkboxes").click(function(){
         $(this).closest('tr').find('td').toggleClass('blue');
    });
});
<<p> JSFIDDLE演示/strong>

最新更新