60

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

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

7 に答える 7

73

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

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

これにより、次の結果が得られます。

ここに画像の説明を入力

于 2009-01-26T21:50:26.607 に答える
7

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

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.
});
于 2011-11-18T07:41:40.533 に答える
4 
$('#secondSelector').prevAll('#firstSelector ~ *')
于 2010-04-05T17:30:19.200 に答える
2

jQuery 1.8以降のリリース以降、受け入れられた回答を少し更新する必要があるように感じます。.andSelf()廃止されました。その代わりに、 があり.addBack()ます。ドキュメントには、知っておくべきことすべてが説明されています。

于 2016-10-27T14:14:31.870 に答える
1

たぶん、

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

なぜ使用するのtext()ですか？最初の結果要素の内部HTMLhtml()のみを返すためです。

于 2009-01-26T20:22:08.423 に答える
0

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

<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");
于 2009-01-26T20:30:15.567 に答える