Jquery节点遍历next与nextAll方法使用示例

前端技术 2023/09/01 JavaScript

Jqeruy节点遍历

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
<html xmlns=\"http://www.w3.org/1999/xhtml\"> 
<head> 
<title></title> 
<script src=\"Jquery/jquery-1.10.2.min.js\" type=\"text/javascript\"></script> 
<script type=\"text/javascript\"> 
//节点遍历 

/*--next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素--*/ 
$(function () { 
/* 
$(\"div\").click(function () { 
alert($(this).next(\"div\").text()) //效果：当单击AA的时候会弹出BB,当点击BB的时候会弹出CC，当点击CC的时候会弹出空的警告框（因为CC这个div节点后挨着它的是p元素，所以就弹出一个空的警告框），当点击FF的时候会弹出KK，当点击KK的时候会弹出空的警告框，(因为KK这个div节点后没有同辈的div元素挨着它了，所以就弹出一个空的警告框) 
*/ 

/*--nextAll()方法用于获取“节点之后”所有的元素--*/ 
/* 
$(\"div,p\").click(function () { 
alert($(this).nextAll().text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有标签的text(); 
}) 
*/ 

/* 
$(\"div,p\").click(function () { 
alert($(this).nextAll(\"p\").text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有p标签的text(); 
}) 
*/ 

/* 
$(\"div\").click(function () { 
$(this).nextAll(\"div\").css(\"background\", \"red\"); //当点击div标签的时候将它后面的所有div标签的背景都设为红色 
}) 
*/ 

/* 
$(\"div\").click(function () { 
$.each($(this).nextAll(\"div\"), function () { $(this).css(\"background-color\", \"red\") })//当点击div标签的时候将它后面的所有div标签的背景都设为红色,与上面的那一条效果是一样的（解释：先取得当前点击的div标签后面的所有div标签，然后对它进行遍历，然后通过后面的匿名函数将取得的所有div标签的背景设为红色）注意这前后两个this意思是不一样的：前面的this指的是当前点击的div标签，后面的thi是：在获取到当前点击的div标签的“后面的div标签”后，遍历他们的每一个div,后面的thi是：在后面的匿名函数正在处理的“当前遍历到的div标签” 【前面的是当前点击的div，后面的匿名函数的真正处理的当前div】 
}) 
*/ 


$(\"div,p\").click(function () { 
//$(this).css(\"background\", \"red\"); $(this).siblings().css(\"background\", \"yellow\"); //将当前点击的div或者P标签背景设为红色，其他的兄弟标签背景设为黄色 

$(this).css(\"background\", \"red\").siblings().css(\"background\", \"yellow\");//与上面一句等同 

}) 

}) 
</script> 
</head> 
<body> 
<div> 
AA</div> 
<div> 
BB</div> 
<div> 
CC</div> 
<p> 
DD</p> 
<p> 
EE</p> 
<div> 
FF</div> 
<div> 
KK</div> 
</body> 
</html>

本文地址：https://www.stayed.cn/item/2171

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案