Вложенная каждая петля, вызывающая проблему

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

Попробуйте использовать nextAll () вместо родных ().

Answer 4

Функция .siblings() не означает «последующие братья и сестры», это означает «все братья и сестры». Первые два тега <p> - это братья и сестры всех тегов <h3>.