javascript - $.each() 中的记录顺序

Question

我有一个 jQuery 脚本，它查看 div 列表，然后是子项，然后打印出来:

1. 项目的标题
2. 元素的描述

我注意到的一个问题是，即使两个 console.log() 在内部 $.each( )，我希望看到:

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

相反我看到的是:

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

---

更新内部.find()s:
脚本:

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

标记:

<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

问题:与此选择器有关 $(this).find('div[class*=has-issues]') 。您有多个 title 和多个 Description 。但是接下来你只是做 $(this).find('.ghx-key > a').text() 这将选择所有 a 标签并获取它文本，Description

的类似问题

解决方案:循环 div[class*=has-issues] 中的元素 .ghx-row。

用 $(this).find('div[class*=has-问题].ghx-row')

下面的工作片段。我还重构了您的代码，使其在选择器中包含 string 而不是 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>