2

Imagine this html:

<h1>Heading Number one</h1>

foo bar is bla bar....

<table>...</table>

<h1>Heading Number two</h1>

other bar is strange bar ...

...

I want to show the parts one after the other.

This means I need to select the <h1>...</h1> until the next <h1>.

In above example I want to get a list of html snippets:

First list item:

<h1>Heading Number one</h1>

foo bar is bla bar....

<table>...</table>

Second list item:

<h1>Heading Number two</h1>

other bar is strange bar ...

...

How to select <h1> and everything up to the next <h1>?

Just using nextUntil() does not help, since the text is not in a tag.

Maybe putting all text in a tag, and then call nextUntil() or a different solution....

guettli
  • 25,042
  • 81
  • 346
  • 663
  • use nextUntil in jquery ref https://www.w3schools.com/jquery/traversing_nextuntil.asp – Deepak A Apr 30 '19 at 12:12
  • If you need the text nodes, see [jQuery nextUntil include text nodes](https://stackoverflow.com/q/25873650/215552) – Heretic Monkey Apr 30 '19 at 12:24
  • You can easily select use jquery `your element.nextAll()` function, but problem is your also contant some solid text. jquery normally not select solid text it's needed for follwing steps: 1. get all html form **h1** instant parent 2. find the **h1** string start index and endindex 3. after endindex after html keeps in a `temp valiable` 4. and remove ther next string after endindex 5. create a new element and append `temp variable` 6. then you style the normally like as normal element style use jquery. – Md. Abu Sayed Apr 30 '19 at 12:32

2 Answers2

1

use nextUntil in jquery ref https://api.jquery.com/nextUntil/ for more details,hope this helps

$("h1").eq(0).nextUntil("h1").css('color','red')  //Selecting first h1 element
$("h1").eq(1).nextUntil("h1").css('color','green')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<h1>Heading Number one</h1>

<p>foo  </p>

<p>foo  </p>

<p>foo </p>

<h1>Heading Number two</h1>
<p>  bar  </p>

<p>  bar </p>

<p>  bar </p>

<h1>Heading Number three</h1>
Deepak A
  • 1,624
  • 1
  • 7
  • 16
0

Seems like you're looking for nextUntil

$("h1:first-of-type").nextUntil("h1")
AdrianEddy
  • 707
  • 1
  • 8
  • 13