Как добавить класс только в родительскую строку не для всех

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() method, чтобы найти ближайший родительский (или дед / родительский) элемент, соответствующий конкретному селектору.Поэтому попробуйте это:

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

Обратите внимание, что .toggleClass() method позаботится о вашем 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 это элемент, с которым было вызвано событие, поэтому вы можете манипулировать им или находить его родителей / братьев и сестер / что угодно, получая объект jQuery с помощью $(this).