JQuery родителя() ("селектор")

Question

У меня есть этот HTML-код:.

<tr> 
    <td><input type="checkbox" class="chk" /></td> 
    <td><div class="disabled">text to hide 1</div></td> 
    <td><div class="disabled">text to hide 2</div></td> 
</tr> 

Я использую JQuery, чтобы скрыть все class="disabled" элементы:

$("div.disabled").hide() ; 

Я хочу показать инвалидов дивы когда я устанавливаю флажок в той же строке (tr). Я попытался

$("input.chk").click(function(){ 
    $(this).parent().parent().(".disabled").show(); 
}) ; 

, но он не работает.

Answer 1

Использование .closest() и .find(), как это:

$("input.chk").click(function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

Ваш текущий код почти работы, вам нужно .find(), хотя, как это:

$(this).parent().parent().find(".disabled").show(); 

Если у вас есть много строк как это, используйте .delegate(), например:

$("table").delegate("input.chk", "click", function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

.delegate() вместо этого привязывает один обработчик к таблице для всех элементов input.chk, чтобы пузыриться до. Если вы хотите, чтобы включить/выключить, использовать change и .toggle() в дополнение к вышесказанному, как это:

$("table").delegate("input.chk", "change", function(){ 
    $(this).closest('tr').find(".disabled").toggle(this.checked); 
}); 

Таким образом, если флажок установлен, они показывают, если они не скрывают.

Answer 2

Практически. Вам просто не хватает слова find, чтобы указать jQuery's .find() method.

$("input.chk").click(function(){ 
    $(this).parent().parent().find(".disabled").show(); 
}) ; 

Или немного короче версия для use .closest().

$("input.chk").click(function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

Вы могли бы также use .parents(), хотя вы хотели бы указать the :first матч в случае, если вы вложенной таблицы.

$("input.chk").click(function(){ 
    $(this).parents('tr:first').find(".disabled").show(); 
}); 

Answer 3

Его фактически даже проще, чем это.

$(".disabled").hide(); 
    $(".chk").click(function(){ 
     if($(this).is(":checked")) 
     { 
      $(this).siblings(".disabled").show(); 
     } 
     else 
     { 
      $(this).siblings(".disabled").hide(); 
     } 
    }); 

Я даже добавил некоторые дополнительные функциональные возможности, так что это событие не только вызвать один раз, а переключение в зависимости от того проверяется или нет флажок.