简体   繁体   中英

JQUERY : Confusion to find next element in a complex structure

I have big confusion while getting next element in a complex structure.

Complex structure :

<p>before data</p>

<div>
   <p>some data <span id="getnext"></span></p>
</div>    

<div>
    <p>some data <span><ins>inserted</ins></span></p>
</div>    

<div>
   <div>
      <p>some data <span><del>deleted</del></span></p>
   </div>
</div>   

<div>
   <div>
       <ol>
             <li>Some changes made<span data-change="get">in this place</span></li>
       </ol>    
   </div>
</div>

This is the complex structure I have on my machine.

I want to get all next element which has ins , del , span[data-change="get"]

For now, I'm in id "getnext" .

And I try the following way to do that.

var arr_ = $('#getnext').next('ins,del,span[data-change="get"]');

But, this is not working very well.What am I do now?

Any ideas or suggestions, please.

Maximum structure variant:

<p>some data <span id="getnext"></span>extra data<ins>some data</ins></p>

<p>deleted<span><del>some data</del></span> data</p>

<ol>
  <li><ins>list insert</li>

  <ul>
     <li><del>deleted</del></li> 
  </ul>

</ol>

<div>
  <p><span data-change="get">changed data</span>
</div>

You need go to the closest (parent) div first

$('#getnext').closest( "div" );

Then check for those next div element which has child ins , del etc

$('#getnext').closest( "div" ).nextAll( "div:has(ins,del,span[data-change='get'])" );

or

$('#getnext').closest( "p" ).nextAll( "p").has("ins,del,span[data-change='get']" ) ;

Demo

 var output = $('#getnext').closest("div").nextAll("div:has(ins,del,span[data-change='get'])"); console.log(output.length); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>before data</p> <div> <p>some data <span id="getnext"></span></p> </div> <div> <p>some data <span><ins>inserted</ins></span></p> </div> <div> <div> <p>some data <span><del>deleted</del></span></p> </div> </div> <div> <div> <ol> <li>Some changes made<span data-change="get">in this place</span></li> </ol> </div> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM