Home  >  Article  >  Web Front-end  >  How to find the content value of sibling nodes in jquery

How to find the content value of sibling nodes in jquery

青灯夜游
青灯夜游Original
2022-08-15 18:13:041914browse

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()".

How to find the content value of sibling nodes in jquery

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(兄弟元素)

How to find the content value of sibling nodes in jquery

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

How to find the content value of sibling nodes in jquery

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

How to find the content value of sibling nodes in jquery

【 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn