jquery - How to select all content between two tags

Question

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?

Answer 1

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.

Regards

Answer 2

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>

i.e. 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");

Answer 3

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>

Answer 4

Perhaps you could start with your desired start-element, and then grab each sibbling as long as it's not the ending tag. When you come across the ending tag, break your loop:

$(document).ready(function(){
  // Alerts [object Object],[object Object],[object Object]
  alert(getAllBetween("h1#heading2","h1#heading3"));
});

function getAllBetween(firstEl,lastEl) {
    var firstElement = $(firstEl); // First Element
    var lastElement = $(lastEl); // Last Element
    var collection = new Array(); // Collection of Elements
    collection.push(firstElement); // Add First Element to Collection
    $(firstEl).nextAll().each(function(){ // Traverse all siblings
     var siblingID  = $(this).attr("id"); // Get Sibling ID
     if (siblingID != $(lastElement).attr("id")) { // If Sib is not LastElement
      collection.push($(this)); // Add Sibling to Collection
     } else { // Else, if Sib is LastElement
      return false; // Break Loop
     }
    });  
    return collection; // Return Collection
}

With the following:

<h1 id="heading1">Heading One</h1>
<p>Paragraph 1A</p>
<p>Paragraph 1B</p>
<h1 id="heading2">Heading Two</h1>
<p>Paragraph 2A</p>
<p>Paragraph 2B</p>
<h1 id="heading3">Heading Three</h1>
<p>Paragraph 3A</p>
<p>Paragraph 3B</p>

So think of it more like "Get All Sibblings Until"

Answer 5

Thanks Jonathan. That seems like it will do the trick, but I can't think of a way to do it with JQuery. Any hints?

Answer 6

Hi, 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()

Regards

Answer 7

hi, i have a source site that have content with incremental link. (somewebsite.com/NewsDetail.aspx?nID=) [=1,2,3,....]

and source code:

1- Title Tag

> <span id="lblbaslik1"
> class="ortabaslik">Endonezya'da
> Amerikan karşıtı gösteri
> düzenlendi</span>

2- Content:

> <span id="metin"
> class="ortatext">CAKARTA -aa-
> Endonezya'da yüzlerce kişinin
> katıldığı Amerikan karşıtı gösteride
> çıkan olaylarda, çok sayıda kişi
> yaralandı.  <br> <br>Görgü tanıkları,
> ABD'nin Afganistan harekatının
> parlamentoda kınanması isteğiyle
> Parlamento önünde düzenlenen gösteriye
> yaklaşık 700 kişinin katıldığını
> açıkladı.  <br> <br>Göstericilere
> dağılmaları uyarısında bulunan
> polisin, basınçlı su ve göz yaşartıcı
> bomba kullandığı, uyarı için havaya
> ateş açtığı, çıkan olaylarda çok
> sayıda kişinin yaralandığı aktarıldı. 
> <br> <br>Polisin harekete geçmesi
> üzerine göstericilerin dağıldıkları
> belirtiliyor.</span>

I want to post that content to my wordpress automatically. is there any script that selects content between two tags from html source code & post to wordpress?

Answer 8

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