Jquery родители () помогают

Question

Может кто-нибудь сказать мне, почему это не работает? Я пытаюсь показать и скрыть контент.

Вот моя разметка

<div class="entry">
  <p class="posted">
    test<br />
    <a href="#" class="toggle" title="Show Comments">
      Show/Hide
    </a>
  </p>
  <div class="box" class="comment">
    test hidden comment
  </div>
</div>

---

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').next('div.box').toggle(400);
  });
});

То, как этот пример выглядит прямо сейчас, если я возьму последний закрывающий div и переместу его вверх после закрывающего тега p, он работает нормально, но показывает и скрывает все скрытое содержимое (div), которое не является что я после Я бы хотел показывать только контент, связанный с каждой ссылкой.

Answer 1

Проблема не в parents, а в next(). next() выбирает родственные элементы, тогда как вам нужны вложенные подэлементы. Вместо этого используйте children(). Попробуйте это, у меня это сработало:

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').children('div.box').toggle(400);
  });
});

Answer 2

попробуйте использовать .parent вместо .parents.

это будет работать:

    $(function() {
        $('div.box').hide();
        $('a.toggle').click(function() {
        $(this).parent('.posted').next('div.box').toggle(400);
        });
    });

Answer 3

В качестве альтернативы я бы использовал closest и find вместо parent и children соответственно, хотя я думаю, что это скорее вопрос предпочтения.

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).closest('.entry').find('div.box').toggle(400);
    return false;
  });
});

Answer 4

Привет, Парким, ты имеешь в виду проблема, которую я имею со страницей прыгать на вершину? Я пробовал это но это все еще делает то же самое. - Jack

Нет, из-за переопределения вы не можете использовать селектор ".box". Ваша страница переходит наверх, из-за привязки «#» вы должны использовать «return false», чтобы предотвратить обработчик «click» по умолчанию.

$( "a" ).click( function() { /* your code */ return false; } );

Answer 5

Работает, если изменить next() на find() или children():

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').find('div.box').toggle(400);
  });
});

Это потому, что next() получает братьев и сестер объекта, а find() ищет потомков. Когда ваш код вызывает next(), объект - '.entry', у которого нет родных братьев и сестер, вы можете использовать children(), как подсказывает зомбат, или find(), как я сделал, чтобы найти div.box, поскольку он является потомком '.entry'.

Answer 6

class="comment" overrides class="box", use class="comment box"