JQuery .nextUntil() selecting heading into li

Question

I'm trying to select all h3 tags under h2 tags even if into li whether ul or ol in a page, using .nextUntil().

HTML markup is like:

<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
  </ol>

Js is like:

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0, i < h2s.length, i++){

  h3s.push($('h2').eq(i).nextUntil('h2', 'h3, li h3').toArray());

};

console.log(h3s);

The expected output is:

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: (3) [h3, h3, h3]

]

While the real output is:

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: []

]

Bilel · Answer 1 · 2020-03-30T17:12:56.930

0

[UPDATED to fit to different code patterns]

jQuery .nextUntil() expects a delimiter (like the <h2> here in your example). So the last part of the HTML code where <h3> elements are nested wouldn't be taken care of. First, because there isn't a <h2> at the end. And second because they aren't siblings.

Using your code, I just added a conditional push where I check first if <h3> is the next element.

var h3s = [];
i=0;
$( "h2" ).each( function( index, element ){
  if($(this).next('h3').length>0){
    if($(this).is('h2:last-of-type')){
h3s.push($('h2').eq(i).nextUntil('section').toArray());

} else {
  h3s.push($('h2').eq(i).nextUntil('h2').toArray());
  } }  else{
  h3s.push($('h2').eq(i).nextUntil('h2').find('h3').toArray());
  }
  i++;
});

console.log(h3s);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
    
    </li>
  </ol>
<h2></h2>  
  <h3></h3>
  <h3></h3>
  <h3></h3>
<section>

PS: Notice that I removed the last <h3> for demo puropose here, so you could identify the last part!

edited Mar 30 '20 at 17:12

answered Mar 30 '20 at 13:23

Bilel

1,421
1
10
15

first thanks for help <3 I don't think that jQuery .nextUntil() expects a delimiter or the `h3` tags that are nested below the last `h2` wouldn't be taken care of. If you moved the `ol` to be under the second `h2` instead of the last one, It'll not get all the `h3` from inside the `ol`, while it'll get the `h3` that not inside `ol` after the last `h2` without delimiter tag. – Mohamed El-Azzawy Mar 30 '20 at 14:17
Yes indeed it expects a delimiter... otherwise it would include unexpected following nodes in your array :) I just updated my answer to fit to different code patterns. But still my first comment is valid and I just added what's missing in another condition. The code already handles any similar patterns... it's up to you to handle anomalies :) – Bilel Mar 30 '20 at 17:19
Thanks very much, that's very good progress it worked only for h3s that are into the `
` [https://prnt.sc/rpple0](https://prnt.sc/rpple0), but the h3 that are **not** into `
` not detected, please note that I'm using jquery 3.4.1 [https://code.jquery.com/jquery-3.4.1.js](https://code.jquery.com/jquery-3.4.1.js).

Mohamed El-Azzawy

Mar 30 '20 at 20:32

Please, find a detailed sample in here with console log [https://playcode.io/533251](https://playcode.io/533251) – Mohamed El-Azzawy Mar 30 '20 at 22:25

Mohamed El-Azzawy · Accepted Answer · 2020-03-31T21:21:10.313

I figured it out after many experiments, thanks to Bilel's each() & if(){}.

here's a full sample https://playcode.io/533251 with a console.

To get all the h3 tags below each h2 tag even if they are into <ol> or <ul>

var h3s = [];

var i = 0;

$('h2').each(function(){

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  } i++;

});

Or we can put the if(){} statement into simple for(){} loop depending on the length of an array of all h2 tags in the page

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0; i < h2s.length; i++) {

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  }

};

JQuery .nextUntil() selecting heading into li

2 Answers2