JQuery parent(). ( "selector" )

У меня есть этот код 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() ;

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

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

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

Ответ 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);
});

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

Ответ 2

Да, используя find() и closest(), безусловно, правильная процедура. Существует другой стиль написания того же. Здесь находится фрагмент кода.

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

Ответ 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();
});

Ответ 4

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

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

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

Ответ 5

И это еще проще:

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

: -)

Ответ 6

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

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