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);
	});
});

• ##Use html ()Set the content of the selected node (innerHTML)

Example: Get the content value of the previous sibling node

$(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!