web-dev-qa-db-ja.com

jQueryの2つのタグ間のすべてのコンテンツを選択する方法

見出しと順序付けられていないリストを含むドキュメントがあります。

JQueryを使用して、特定の見出し（一意のクラス名）とその見出しと次の見出しの間のすべてのコンテンツを選択するにはどうすればよいですか？

更新：

あなたの提案は素晴らしいですが、私が探しているものではありません。たとえば、次のコードでは、「heading2」のIDを持つ「h1」と、「heading3」のIDを持つ「h1」を除くすべてにアクセスします。

上記の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>
jquerycss-selectorstraversal
57
edt

この問題を解決するには、特に2つの方法が非常に役立ちます。 .nextUntil 、および .andSelf 。前者は、セレクターに続くすべての兄弟を取得し、後者は、セレクターと一致するものをすべてまとめて、それらすべてを含む1つのjQueryオブジェクトを提供します。

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

その結果、次のようになります。

enter image description here

71
Sampson

プロジェクトに使用するソリューションは次のとおりです。

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.
});
7
Lasse Espeholt
$('#secondSelector').prevAll('#firstSelector ~ *')
3
jesper

ええ、あなたは正しいです。これにより、必要なセレクターのみが回避されます。たぶんそれはもっと詳細にする必要があります：

$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()
2
Ricardo Vega

たぶん、と

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

なぜtext()を使用するのですか？ html()は、最初の結果要素の内部 [〜＃〜] html [〜＃〜] のみを返すためです。

1
Ricardo Vega

JQuery 1.8以降のリリース以降、受け入れられた回答を更新する必要があるように感じます。 .andSelf()は廃止されました。その代わりに、.addBack()があります。 documentation は、知る必要のあるすべてを説明しています。

1
Thomas

要素が同じレベルにある場合、次のようになります。

<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");
0
disc0dancer