javascript - 問題を引き起こすネストされた各ループ

Question

こんにちは–私の質問は、意図した出力と実際の出力を要約するのが最善です. 次の HTML と JS コードを使用して、なぜこれを行っているのか手がかりはありますか?

HTML コード:

<h3>CATEGORY 1</h3>
<p>Item 1</p>
<p>Item 2</p>

<h3>CATEGORY 2</h3>
<p>Item 3</p>
<p>Item 4</p>

<h3>CATEGORY 3</h3>
<p>Item 5</p>
<p>Item 6</p>

JavaScript / jQuery コード:

$(".h3").each(function () {

  // Display H3 Text
  console.log($(this).text());

  $(this).siblings('p').each(function () {
    if ( $(this).next().is('h3') ) {

      // Display Last Paragraph Text Before <H3>
      console.log($(this).text());

      // Break the Each Loop, Go to next H3
      return false;
    }
    else {

      // Display Paragraph Text
      console.log($(this).text());
    }
  });
});

意図した出力:

CATEGORY 1
Item 1
Item 2
CATEGORY 2
Item 3
Item 4
CATEGORY 3
Item 5
Item 6

実際の (意図しない) 出力:

CATEGORY 1
Item 1
Item 2
CATEGORY 2
Item 1
Item 2
CATEGORY 3
Item 1
Item 2

ありがとう。

Answer 1

すべての兄弟を選択するためsiblings()、すべての前とすべての後続。私はあなたが必要だと思いますnextAll()：

一致した要素のセット内の各要素の後続のすべての兄弟を取得します。オプションでセレクターによってフィルター処理されます。

---

デモ

$("h3").each(function () {

  // Display H3 Text
  console.log($(this).text());

  $(this).nextAll('p').each(function () {
    if ( $(this).next().is('h3') ) {

      // Display Last Paragraph Text Before <H3>
      console.log($(this).text());

      // Break the Each Loop, Go to next H3
      return false;
    }
    else {

      // Display Paragraph Text
      console.log($(this).text());
    }
  });
});

与える：

CATEGORY 1
Item 1
Item 2

CATEGORY 2
Item 3
Item 4

CATEGORY 3
Item 5
Item 6

Answer 2

最後の要素の後に兄弟がいない場合は、代わりに<p>使用すると思います。.nextUntil('h3')

$("h3").each(function() {
  console.log($(this).text());
  $(this).nextUntil('h3').each(function() {
     console.log($(this).text());
  });
});

• http://api.jquery.com/nextuntil/

必要に応じて、明示的な呼び出しなしでそれを行うこともできます.each()

$("h3").text(function(i,txt) {
  console.log(txt);
  $(this).nextUntil('h3').text(function(i,txt) {
    console.log(txt);
  });
});

Answer 3

この.siblings()関数は「後続の兄弟」を意味するのではなく、「すべての兄弟」を意味します。最初の2つの<p>タグは、すべての<h3>タグの兄弟です。

Answer 4

siblings（）の代わりにnextAll（）を使用してみてください。