CODEWITHSUNDEEP
jquerycss-selectorstraversal
edt
edt

Reputation: 22410

How to select all content between two tags in jQuery

I have a document with headings and unordered lists.

How can I use JQuery to select a given heading (by its unique class name) AND all content between that heading and the next heading?

Update:

Your suggestions are great, but aren't what I'm looking for. In the below code, for example, I would like to access only the "h1" with id of "heading2" and everything up to, but not including the "h1" with id of "heading3".

The jQuery examples provided above will access everyting after the first "h" tag that is not an "h" tag.

... or, correct me if I'm wrong :)

    <h1 id="heading1">...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
    <h1 id="heading2" >...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
    <h1 id="heading3" >...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>

Upvotes: 61

Views: 36469

Answers (7)

Thomas
Thomas

Reputation: 6670

I feel as if the accepted answer needs a bit of an update since the release of jQuery 1.8 and later. .andSelf() has been deprecated. In its place, we have .addBack(). The documentation explains everything you need to know.

Upvotes: 2

jesper
jesper

Reputation: 49

$('#secondSelector').prevAll('#firstSelector ~ *')

Upvotes: 4

Lasse Espeholt
Lasse Espeholt

Reputation: 17782

Here is the solution I use for my projects:

jQuery selector

(function ($) {
    $.fn.between = function (elm0, elm1) {
        var index0 = $(this).index(elm0);
        var index1 = $(this).index(elm1);

        if (index0 <= index1)
            return this.slice(index0, index1 + 1);
        else
            return this.slice(index1, index0 + 1);
    }
})(jQuery);

Usage 

$('body').between($('#someid'), $('#someid2')).each(function () {
    // Do what you want.
});

Upvotes: 7

Ricardo Vega
Ricardo Vega

Reputation: 1975

Yeah, you're right. This will only avoid the desired selector. Maybe it needs to be more detailed:

$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()

Upvotes: 2

disc0dancer
disc0dancer

Reputation: 9365

If your elements are at the same level, something like this:

<h1 id="heading1">...</h1>
<ul>...</ul>
<p>...</p>
<ul>...</ul>
<p>...</p>
<h1 id="heading2" >...</h1>

That is, your next heading element is not a child of an element at the same level as the first heading element. You can try this code:

// This will get all the following siblings of <h1 id="heading1"> except those that are headings themselves
var elements = $('#heading1').nextAll().not("h1");

Upvotes: 0

Ricardo Vega
Ricardo Vega

Reputation: 1975

Maybe, with

$(selectorForFirstHeading).nextAll().not(selectorForLastHeading).text()

Why do I use text()? Because html() will only return the inner HTML of the first result element.

Upvotes: 1

Sampson
Sampson

Reputation: 268344

Two methods in particular would be very useful solving this problem: .nextUntil, and .andSelf. The first will grab all of the siblings following your selector, and the latter will lump in whatever is matched by your selector as well, giving you one jQuery object that includes them all:

$("#heading2")
    .nextUntil("#heading3").andSelf()
        .css("background", "red");

This results in the following:

enter image description here

Upvotes: 74

Related Questions