jQuery parent (). («селектор»)

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() ;

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

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

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

Answer 1

Используйте .closest() и .find(), например:

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

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

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

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

$("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() и closest(), безусловно, правильная процедура. Существует другой стиль написания того же. Фрагмент кода здесь.

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

Answer 3

Почти. Вам просто не хватает слова find для обозначения метода jQuery .find() .

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

Или, более короткая версия - использовать .closest().

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

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

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

Answer 4

Теперь это работает: http://jsfiddle.net/WAQBj/2/

$(".disabled").hide();
$(".chk").click(function() {
    $(this).closest('tr').find(".disabled").toggle();
});​

Answer 5

А еще проще:

$(".disabled").hide();
$(".chk").click(function() {
    $(this).siblings(".disabled").toggle();
});​

: -)

Answer 6

На самом деле это даже проще, чем это.

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

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