Home > Article > Web Front-end > How to find the content value of sibling nodes in jquery
Implementation steps: 1. Use the function that traverses sibling nodes (siblings(), next(), etc.) to obtain the sibling nodes of the specified element. The syntax is "specify element. Specify traversal function"; 2. Use text() Or use the html() function to get the content value of the selected node, the syntax is "sibling node.text()" or "sibling node.html()".
The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.
jquery seeks the content value of sibling nodes, you can see two parts:
Find sibling nodes
Get the content value of the selected node
Step 1. Find sibling nodes
jquery provides a variety of ways to get sibling nodes There are generally seven functions:
siblings() method, which is mainly used to obtain all sibling elements of the same level of the specified element
next () method, mainly used to obtain the next sibling element of the specified element
nextAll() method, mainly used to obtain all sibling elements of the next sibling element of the specified element
nextUntil() method is mainly used to obtain the next sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the nextUntil() method
prev() method, mainly used to obtain the upper level sibling elements of the specified element
prevAll() method, mainly used to obtain the upper level of the specified element All sibling elements
The prevUntil() method is mainly used to obtain the previous sibling element of the specified element. This sibling element must be between the specified element and the element set by the prevUntil() method. Element
Example: Use next() to get the next sibling node of the selected element h2
$("h2").next()
Step 2. Get the content value of the selected node
Use the text() method to set the text content of the selected node
Example 1: Get the content value of the next sibling node
div (父)p(兄弟元素)
span(兄弟元素)h2(本元素)
h3(兄弟元素)
p(兄弟元素)
Example 2: Get the content values of all sibling nodes
$(document).ready(function() { $("button").click(function() { $("h2").siblings().css("color","red"); var con=$("h2").siblings().text(); console.log(con); }); });
$(document).ready(function() { $("button").click(function() { $("h2").next().css("color","red"); var con=$("h2").next().html(); console.log(con); }); });【 Recommended learning:
jQuery video tutorial, web front-end video]
The above is the detailed content of How to find the content value of sibling nodes in jquery. For more information, please follow other related articles on the PHP Chinese website!