如何仅将类添加到父行而不是全部

Question

使用这个功能。但它将 row_selected 类添加到所有行。如何将其添加到父行？

$('.checkbox').click( function() {
    if ( $("#list tr").hasClass('row_selected') )
        $("#list tr").removeClass('row_selected');
    else
        $("#list tr").addClass('row_selected');
} );

Answer 1

您可以使用 .closest() 方法 查找最近的父级（或祖父母/祖先）元素匹配特定的选择器。所以试试这个：

$('.checkbox').click( function() {
   $(this).closest("tr").toggleClass("row_selected");
});

注意 .toggleClass() 方法 负责处理你的 if/else 适合你，但如果你真的想手动编码：

$('.checkbox').click( function() {
    // store the reference to the containing tr in a variable instead of
    // reselecting it
    var $tr = $(this).closest("tr");
    if ($tr.hasClass('row_selected') )
        $tr.removeClass('row_selected');
    else
        $tr.addClass('row_selected');
});

请注意，无论哪种方式，在 jQuery 事件处理程序中 this 都是触发事件的元素，因此你可以操纵它或通过获取找到它的父母/兄弟姐妹/任何东西带有 $(this) 的 jQuery 对象。