$ .each()中的记录顺序

Question

我有一个jQuery脚本,通过一个div列表,然后它的子,并打印出来:

1. 该项目的标题
2. 该项目的描述

我注意到的一个问题是,即使两个console.log()s为彼此相邻在内$.each(),我希望看到:

标题1描述1标题2描述2标题3描述3 ...等

相反,我所看到的是:

标题1标题2标题3 ...等
描述1描述2描述3 ...等

---

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

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

.ghx-row解决方案：循环div[class*=has-issues].

将你的替换$(this).find('div[class*=has-issues]')为$(this).find('div[class*=has-issues] .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>