Logging sequence in $.each()

Question

I have a jQuery script that looks through a list of divs, and then it's children, and prints out:

1. The item's title
2. The item's description

An issue I'm noticing is that even though the two console.log()s are next to each other in the inner $.each(), I'd expect to see:

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

Instead what I'm seeing is:

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

---

Updated the inner .find()s:
The 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
    });
});

The 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: is with this selector $(this).find('div[class*=has-issues]') .You have multiple title and multiple Description with in it. But next you are just doing $(this).find('.ghx-key > a').text() which will select all the a tags and gets its text, Similar issue for Description

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

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

Working snippet below. Also I have refactored your code to have string in selectors rather than 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>