Как выбрать все содержимое между двумя тегами в jQuery

У меня есть документ с заголовками и неупорядоченными списками.

Как я могу использовать JQuery для выбора данного заголовка (по его уникальному имени класса) И всего содержимого между этим заголовком и следующим заголовком?

Обновление:

Ваши предложения отличные, но не то, что я ищу. В приведенном ниже коде, например, я хотел бы получить доступ только к "h1" с идентификатором "heading2" и все до, но не включая "h1" с идентификатором "heading3".

Приведенные выше примеры jQuery будут иметь доступ к каждому типу после первого тега "h", который не является тегом "h".

... или, исправьте меня, если я ошибаюсь:)

    <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>

Ответы

Ответ 1

Два метода, в частности, были бы очень полезны для решения этой проблемы: .nextUntil и .andSelf. Первый захватит всех братьев и сестер, следующих за вашим селектором, и последний будет комментировать все, что соответствует вашему селектору, и предоставит вам один объект jQuery, который включает их все:

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

В результате получается следующее:

enter image description here

Ответ 2

Вот решение, которое я использую для своих проектов:

Селектор jQuery

(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);

Использование

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

Ответ 3

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

Ответ 4

Да, ты прав. Это позволит избежать желаемого селектора. Может быть, это должно быть более подробно:

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

Ответ 5

Возможно, с

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

Почему я использую text()? Поскольку html() возвращает только внутренний HTML первого элемента результата.

Ответ 6

Мне кажется, что принятый ответ нуждается в обновлении с момента выпуска jQuery 1.8 и более поздних версий. .andSelf() устарел. На его месте мы имеем .addBack(). Документация объясняет все, что вам нужно знать.

Ответ 7

Если ваши элементы находятся на одном уровне, что-то вроде этого:

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

То есть ваш следующий элемент заголовка не является дочерним элементом элемента на том же уровне, что и первый элемент заголовка. Вы можете попробовать этот код:

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