Shulou(Shulou.com)06/01 Report--

This article mainly shows you "jquery how to query sibling elements", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "jquery how to query sibling elements" this article.

Query methods: 1, using the siblings () method, you can get all the elements of the same level; 2, using the next () method, you can get the next sibling element; 3, using nextAll (); 4, using nextUntil (); 5, using prev (); 6, using prevAll (); 7, using prevUntil ().

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery query sibling elements

In jquery, there are generally seven methods to query sibling elements: siblings (), next (), nextAll (), nextUntil (), prev (), prevAll (), prevUntil ()

The siblings () method, which is mainly used to get all the elements at the same level of the specified element

The next () method, which is mainly used to get the next sibling element of the specified element

The nextAll () method, which is mainly used to get all elements of the next sibling of the specified element

The nextUntil () method is mainly used to get the next sibling element of the specified element, which must be the element between the specified element and the element set by the nextUntil () method

The prev () method, which is mainly used to get the sibling element at the next level of the specified element

The prevAll () method, which is mainly used to get all the sibling elements one level above the specified element

The prevUntil () method, which is mainly used to get the previous sibling of the specified element, which must be the element between the specified element and the element set by the prevUntil () method

Siblings () method

Hello Hello Again

And Again

$("p") .siblings (".selected") .css ("background", "yellow")

Next () method

List item 1 list item 2 list item 3 list item 4 list item 5 $('li.third-item'). Next (). Css (' background-color', 'red')

NextAll () method

List item 1 list item 2 list item 3 list item 4 list item 5 $('li.third-item'). NextAll (). Css (' background-color', 'red')

NextUntil () method

.siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } $(document) .ready (function () {$("li.start"). NextUntil ("li.stop"). Css ({"color": "red") "border": "2px solid red"}) }) Ul (parent node) li (sibling node with class name "start") Li (next sibling node of li node named "start") li (next sibling node of li node named "start") li (next sibling node of li node named "start") Li (sibling node with class name "stop")

In this example, we return all the next sibling elements between the li element with the class name "star" and the class name "stop".

Prev () method

.siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } $(document) .ready (function () {$("li.start"). Prev (). Css ({"color": "red") "border": "2px solid red"}) }) Ul (parent) li (sibling) li (last sibling of the li node with the class name "start") li ( Li node named "start") li (sibling node) li (sibling node)

PrevAll () method

.siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } $(document) .ready (function () {$("li.start"). PrevAll (). Css ({"color": "red") "border": "2px solid red"}) }) Ul (parent) li (previous sibling of li with class name "start") li (previous sibling of li with class name "start") Li (last sibling of li with class name "start") li (li node with class name "start") li (sibling) li (sibling)

In this example, we return all sibling elements before the li element with the class name "star".

PrevUntil () method

.siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } $(document) .ready (function () {$("li.start"). PrevUntil ("li.stop"). Css ({"color": "red") "border": "2px solid red"}) }) Ul (parent node) li (sibling node with class name "stop") li (previous sibling node of li node with class name "start") Li (previous sibling node of li node named "start") li (previous sibling node of li node named "start") li (li node named "start") li (sibling node) Li (sibling node)

In this example, we return all the previous sibling elements between the li elements with the class names "star" and "stop".

The above is all the content of the article "how to query sibling elements in jquery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.