嵌套每个循环会导致问题

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

如果最后一个

元素之后没有更多兄弟姐妹，我想我会使用 .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() 函数并不意味着“后续兄弟姐妹”，而是意味着“所有兄弟姐妹”。前两个

标记是所有

标记的同级标记。

Answer 4

尝试使用 nextAll() 而不是siblings()。