ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

jQuery Tutorial

jQuery HOME jQuery Intro jQuery Get Started jQuery Syntax jQuery Selectors jQuery Events

jQuery Effects

jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

jQuery HTML

jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions

jQuery Traversing

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering

jQuery AJAX

jQuery AJAX Intro jQuery Load jQuery Get/Post

jQuery Misc

jQuery noConflict() jQuery Filters

jQuery References

jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties


jQuery Traversing - Siblings


С помощью jQuery вы можете перемещаться по боком в DOM-дереве, чтобы находить родственные элементы элемента.

Братья и сестры имеют одного родителя.


Обход боком в дереве DOM

Существует много полезных методов jQuery для обхода боком в DOM-дереве:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

метод братьев и сестер jQuery ()

Метод братьев и сестер () возвращает все родственные элементы выбранного элемента.

В следующем примере возвращаются все родственные элементы <H2>:

Пример

$(document).ready(function(){
    $("h2").siblings();
});

Можно также использовать необязательный параметр для фильтрации поиска для братьев и сестер.

В следующем примере возвращаются все родственные элементы <H2>, которые являются <p> элементами:

Пример

$(document).ready(function(){
    $("h2").siblings("p");
});


Метод jQuery Next ()

Метод Next () возвращает следующий родственный элемент выбранного элемента.

В следующем примере возвращается следующий одноуровневый элемент < H2 >:

Пример

$(document).ready(function(){
    $("h2").next();
});

Метод jQuery nextAll ()

Метод nextAll () возвращает все соседние элементы выбранного элемента.

В следующем примере возвращаются все элементы следующего элемента <H2>:

Пример

$(document).ready(function(){
    $("h2").nextAll();
});

Метод jQuery nextUntil ()

Метод nextUntil () возвращает все соседние элементы одного уровня между двумя заданными аргументами.

В следующем примере возвращаются все родственные элементы между < H2 > и элементом < H6 >:

Пример

$(document).ready(function(){
    $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() методы

The prev(), prevAll() и prevUntil() методы работают так же, как и методы, описанные выше, но с обратной функциональностью: они возвращают предыдущие родственные элементы (обход назад вдоль элементов в дереве DOM, а не вперед).


Справочник на обход jQuery

Для полного обзора всех методов обхода jQuery, пожалуйста, перейдите на наш справка на обход jQuery.