JQuery traverses the next of nextAll of method using instances

2020-03-30 04:17:35
OfStack

Jquery traverses the: next() and nextAll() methods. Examples are as follows:


<html>

<head>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

  //$("div").click(function(){alert($(this).next().text());});

  //$("div").click(function(){alert($(this).nextAll().text());});

  $("div").click(function(){alert($(this).nextAll("div").text());});

 });

</script>

<style type="text/css">

div{width:300px;height:30px;background:green;margin-top:10px;}

</style>

</head>

<body>

<div id="uu"> How do you do? <font color="blue"> The beauty </font></div>

<div>hello,world</div>

<div> Honey, give me a kiss </div>

<p> I am a p The label </p>

<div><span> I'm handsome, picture is truth </span></div>

<p> I am also p The label </p>

</body>

</html>

Description:

(1) next() method: refers to the adjacent peer element (that is, the next peer element) of the matched element. Note that the peer element is not the element with the same tag, but the next element after the element is closed, such as "< Div> Beauty, a kiss < / div> ", the next element after div is closed is < P> .

(2) if next() adds an argument, that is, next("div"), if the next adjacent element is not div, it is empty, that is, it must be adjacent.

(3) nextAll() method: refers to all the peer elements after obtaining the matching elements. It can also add arguments, nextAll("p") or nextAll("div"), and so on.

(4) somewhat curiously, if the code is:



$("div").click(function(){alert($(this).nextAll("div").html());});

It doesn't get all the HTML content, it just gets the HTML content for the next sibling element. ????? confusion