jquery - 选择前一个元素 - jQuery

Question

这是我的代码，

<tr>
    <td>
        <input type="checkbox" class="cbx" name="cbx">
    </td>
    <td>
        <div>some content</div>
    </td>
    <td>
        <span class="book">Book now</span>
    </td>
</tr>

我的页面中有大约 20 个与此类似的表格行。我想要做的是，当我单击该行中第三个 td 中的 span 标签时，应选中同一行中的复选框。

我试过这个，但它不起作用，

$('.book').click(function() {
   $(this).parent().find('.cbx').attr('checked',true);
});

请帮我缩短这个，

问候。

Answer 1

简单，使用.closest()方法 findtr比去搜索你的.cbx！:)

$('.book').click(function() {
   $(this).closest('tr').find('.cbx').prop('checked',true);
});

您的示例指向您的TD元素，因为您仅使用.parent().
要达到TR而不是使用.parent().parent()使用只是.closest('tr')

http://api.jquery.com/closest/
http://api.jquery.com/prop/

Answer 2

这可以很简单地完成

$( '.book' ).on( 'click', function() {
    var $tr = $( this ).parents( 'tr' ).eq( 0 );
    // get the parenting tr

    $( '.cbx', $tr ).attr( 'checked', true );
    // select elements matching '.cbx' inside of $tr and check them
} );

Answer 3

在您的代码.parent()中将选择父<td>节点。为了选择<tr>，您应该使用.parent().parent()或.closest("tr")：

$(".book").on("click", function() {
    $(this).closest("tr").find(".cbx").prop("checked", true);
});

请注意，最好应用.prop("checked", true)or .attr("checked", "checked")。