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

获取匹配元素集中每个元素的所有以下兄弟，可选择使用选择器进行过滤。

Demo

$("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()函数并不意味着“后来的兄弟姐妹”，它意味着“所有兄弟姐妹”。前两个<p>标记是所有<h3>标记的兄弟。

Answer 4

尝试使用nextAll（）而不是兄弟（）。

嵌套每个循环导致问题

4 个答案: