Nested Each Loop Causing Problem

Question

Hello – My question is best summarize with the intended output and the real output. Any clue why it's doing this, using the following HTML and JS code?

HTML Code:

<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 Code:

$(".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());
    }
  });
});

Intended Output:

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

Real (Unintended) Output:

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

Thanks.

I'm confused why you worry about checking for the next h3. If the <p> tag is within the <h3>, the nested loop will automatically handle going to the next <h3> when it reaches the end of the <p> selector. — JasCav
– JasCav, Commented Jul 14, 2010 at 18:20
@Jason: The p elements are not inside the h3 elements. They are not even allowed there. — Felix Kling
– Felix Kling, Commented Jul 14, 2010 at 18:33
@Felix - Wow. I'm a noob. Haha, I even knew that and still asked the dumb question anyway. Thanks for the clarification (and for not mowing me over). — JasCav
– JasCav, Commented Jul 14, 2010 at 20:33

Felix Kling · Accepted Answer · 2010-07-14 18:34:20Z

4

Because siblings() selects all siblings, all previous and all following. I think you need nextAll():

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

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());
    }
  });
});

gives:

CATEGORY 1
Item 1
Item 2

CATEGORY 2
Item 3
Item 4

CATEGORY 3
Item 5
Item 6

edited Jul 14, 2010 at 18:34

answered Jul 14, 2010 at 18:20

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2010-07-14 18:36:31Z

2

If there are no more siblings after the last <p> element, I guess I'd use .nextUntil('h3') instead:

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

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

If you wanted, you could even do it without the explicit calls to .each()

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

edited Jul 14, 2010 at 18:36

answered Jul 14, 2010 at 18:31

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

Pointy · Accepted Answer · 2010-07-14 18:20:27Z

1

The .siblings() function does not mean "subsequent siblings", it means "all siblings." The first two <p> tags are siblings of all the <h3> tags.

answered Jul 14, 2010 at 18:20

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Jan · Accepted Answer · 2010-07-14 18:21:04Z

1

Try using nextAll() instead of siblings().

answered Jul 14, 2010 at 18:21

Jan

2,2931 gold badge17 silver badges16 bronze badges

Collectives™ on Stack Overflow

Nested Each Loop Causing Problem

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related