jquery怎么求兄弟节点的内容值

青灯夜游
Freigeben: 2022-08-15 18:13:04
Original
1806 人浏览过

实现步骤:1、用遍历兄弟节点的函数(siblings()、next()等)获取指定元素的兄弟节点,语法“指定元素.指定遍历函数”;2、用text()或html()函数获取被选节点的内容值,语法“兄弟节点.text()”或“兄弟节点.html()”。

jquery怎么求兄弟节点的内容值

本教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jquery求兄弟节点的内容值,可以看出两个部分:

  • 查找兄弟节点

  • 获取被选节点的内容值

步骤1、查找兄弟节点

jquery中提供了多种获取兄弟节点的函数,一般有七个:

  • siblings()方法,主要用于获得指定元素的同级所有兄弟元素

  • next()方法,主要用于获得指定元素的下一个兄弟元素

  • nextAll()方法,主要用于获得指定元素的下一个同级的所有兄弟元素

  • nextUntil()方法,主要用于获得指定元素的下一个兄弟元素,这个兄弟元素必须为指定元素与nextUntil()方法所设置元素之间的元素

  • prev()方法,主要用于获得指定元素的上一级兄弟元素

  • prevAll()方法,主要用于获得指定元素上一级所有的兄弟元素

  • prevUntil()方法,主要用于获得指定元素的上一个兄弟元素,这个兄弟元素必须为指定元素与prevUntil()方法所设置元素之间的元素

示例:使用next()获取被选元素h2的下一个兄弟节点

$("h2").next()
Nach dem Login kopieren

步骤2、获取被选节点的内容值

  • 使用text() 方法设置被选节点的文本内容

示例1:获取下一个兄弟节点的内容值



	
		
		
		
		
	
div (父)

p(兄弟元素)

span(兄弟元素)

h2(本元素)

h3(兄弟元素)

p(兄弟元素)

Nach dem Login kopieren

1.gif

示例2:获取全部兄弟节点的内容值

$(document).ready(function() {
	$("button").click(function() {
		$("h2").siblings().css("color","red");
		var con=$("h2").siblings().text();
		console.log(con);
	});
});
Nach dem Login kopieren

2.gif

  • 使用html()设置被选节点的内容(innerHTML)

示例:获取上一个兄弟节点的内容值

$(document).ready(function() {
	$("button").click(function() {
		$("h2").next().css("color","red");
		var con=$("h2").next().html();
		console.log(con);
	});
});
Nach dem Login kopieren

3.gif

【推荐学习:jQuery视频教程web前端视频

以上是jquery怎么求兄弟节点的内容值的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!