JQuery выберите братьев и сестер "до"

Question

У меня есть DOM в форме

<input class="parent"></div>
<input class="child"></div>
<input class="child"></div>
<input class="parent"></div>
<input class="child"></div>
...

Я знаю, что это неправильно, и правильный способ сделать это - реформировать HTML, но допустим, что это невозможно.

Как получить jquery для выбора всех дочерних элементов одного из родителей (то есть выбрать все .children до .parent)

Answer 1

jQuery 1.4 теперь имеет функцию .nextUntil (селектор):

    $('div.parent').toggle(
        function() {
            $(this).nextUntil('div.parent').hide();
         },
        function() {
            $(this).nextUntil('div.parent').show();
        }
    );

Answer 2

Вы можете перебирать элементы nextAll div, пока не найдете следующие значения .parent, проверьте этот пример :

$('.parent').click(function() {
  $(this).nextAll('div').each(function() {
    if ($(this).is('.parent')) {
      return false; // next parent reached, stop
    }
    $(this).toggleClass('highlight');
  });
});

Используемая разметка:

<div class="parent">parent 1</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="parent">parent 2</div>
<div class="child">child</div>
<div class="parent">parent 3</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>

...

Answer 3

* Смотрите ответ @foson для jquery 1.4+ *

Проверяйте Бена Альманса , пока не утихнет .

Это дает вам 3 полезных метода: nextUntil, prevUntil, parentUntil.

Answer 4

Я думаю, что нет необходимости в вышеуказанных пользовательских функциях, JQuery поддерживает эту функцию с помощью функции nextUntil(selector, filter), но вы должны добавить фильтр, чтобы применять ваш скрипт только к фильтруемым элементам, а не ко всем следующим элементам:

//hide all .child elements
$('div.child').hide();
$('div.parent').click(function() {
  //Toggle (show or hide) only .child elements until finding .parent element.
  $(this).nextUntil('div.parent', 'div.child').slideToggle('slow');
});