Of Stack

Jquery node traverses the next and nextAll methods using the example

  • 2020-03-30 03:32:45
  • OfStack

Jqeruy node traversal 


<!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"> 
//Node traversal

 
$(function () { 
/* 
$("div").click(function () { 
alert($(this).next("div").text()) //Effect: when clicking the AA will pop up BB, will pop up when click the BB CC, when click the CC will pop up empty alert box (because the CC this div node after next to it is a p element, so an alert box will pop up an empty), will pop up when click the FF KK, when click KK alert box will pop up empty, (because there is no peer KK after this div node div element next to it, so the alert box will pop up an empty)
*/ 

 
/* 
$("div,p").click(function () { 
alert($(this).nextAll().text()); //Text () of all the tags after the current one is clicked pops up when you click the div tag or the p tag.
}) 
*/ 

/* 
$("div,p").click(function () { 
alert($(this).nextAll("p").text()); //When you click the div tag or the p tag, the text() of all the p tags after the clicked current tag pops up.
}) 
*/ 

/* 
$("div").click(function () { 
$(this).nextAll("div").css("background", "red"); //When you click on the div tag, set the background of all the div tags after it to red
}) 
*/ 

/* 
$("div").click(function () { 
$.each($(this).nextAll("div"), function () { $(this).css("background-color", "red") })//When click on the div tag behind it all background div tags to red, the one with the above effect is the same (explanation: click to get the current div tags behind all div tags, and then to traverse it, and then through the back of the anonymous function will make the background of all div tags to red) note before and after the two this is not the same, in front of this refers to the current click div tags, behind thi is: After getting the "next div tag" of the currently clicked div tag, iterate over each div, and the thi after that is: the "currently traversed div tag" which is being processed by the anonymous function in the back.
}) 
*/ 


$("div,p").click(function () { 
//$(this).css("background", "red"); $(this).siblings().css("background", "yellow"); // Will be currently clicked div or P The background of the label is set to red, and the background of other brother labels is set to yellow  

$(this).css("background", "red").siblings().css("background", "yellow");//Be equivalent to the above sentence

}) 

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

Related articles: