The logging sequence in $ .each ()

Question

I have a jQuery script that scans a list of divs and then its children and outputs:

• Item title
• Product description

I notice that although the two console.log() are next to each other in the inner $.each() , I expect to see:

Title 1 Description 1 Title 2 Description 2 Title 3 Description 3 ... etc.

Instead, I see:

Title 1 Title 2 Title 3 ... etc.
Description 1 Description 2 Description 3 ... etc.

---

Updated internal .find() s:
script:

 $('.ghx-backlog').each(function(){ $($(this).find('div[class*=has-issues]')).each(function(index){ console.log($(this).find('.ghx-key > a').text()); //The Title console.log($(this).find('.ghx-summary > span').text()); //The Description }); }); 

Markup:

 <div id="ghx-backlog" class="ghx-backlog" data-rendered="123456789"> <div class="ghx-issues js-issue-list ghx-has-issues"> <div class="js-issue js-sortable js-parent-drag ghx-issue-compact ghx-type-6" data-issue-id="1233456" data-issue-key="Title 1"> <div class="ghx-issue-content"> <div class="ghx-row"> <div class="ghx-key"> <a href="/browse/Title 1" title="Title 1" class="js-key-link">XXXXXX-##</a> </div> <div class="ghx-summary" title="Description 1"> <span class="ghx-inner">Description 1</span> </div> </div> <div class="ghx-row"> <div class="ghx-key"> <a href="/browse/Title 2" title="Title 2" class="js-key-link">XXXXXX-##</a> </div> <div class="ghx-summary" title="Description 2"> <span class="ghx-inner">Description 2</span> </div> </div> </div> </div> </div> </div> 

Answer 1

Problem: with this selector $(this).find('div[class*=has-issues]') . It has several title and several Description . But next time you just do $(this).find('.ghx-key > a').text() , which will select all the a tags and get its text. A similar problem for Description

Solution: End the .ghx-row element that is within the div[class*=has-issues] .

Replace $(this).find('div[class*=has-issues]') with $(this).find('div[class*=has-issues] .ghx-row')

The following is a working snippet. I also reorganized your code for string in selectors, not Jquery Object .

 $('.ghx-backlog').each(function(){ $(this).find('div[class*=has-issues] .ghx-row').each(function(index){ console.log($(this).find('.ghx-key > a').text()); //The Title console.log($(this).find('.ghx-summary > span').text()); //The Description }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ghx-backlog" class="ghx-backlog" data-rendered="123456789"> <div class="ghx-issues js-issue-list ghx-has-issues"> <div class="js-issue js-sortable js-parent-drag ghx-issue-compact ghx-type-6" data-issue-id="1233456" data-issue-key="Title 1"> <div class="ghx-issue-content"> <div class="ghx-row"> <div class="ghx-key"> <a href="/browse/Title 1" title="Title 1" class="js-key-link">XXX(1)XXX-##</a> </div> <div class="ghx-summary" title="Description 1"> <span class="ghx-inner">Description 1</span> </div> </div> <div class="ghx-row"> <div class="ghx-key"> <a href="/browse/Title 2" title="Title 1" class="js-key-link">XXX(2)XXX-##</a> </div> <div class="ghx-summary" title="Description 2"> <span class="ghx-inner">Description 2</span> </div> </div> </div> </div> </div> </div>