forEach只使用第一个元素

Question

我得到某种HTML代码作为列表，每个列表项都有链接。我希望得到那些使用JavaScript并且只将它们记录下来供以后使用。它是一个拥有标题，链接和位置的工作列表。

代码看起来像这样：

＆＃13;

＆＃13;

var jobs = document.getElementsByClassName("offerlist-item");

var jobList = [].slice.call(jobs);
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;

jobList.forEach(function(job) {
  jobAnchor = $('h3.styleh3').html();
  jobUrl = $(jobAnchor).attr('href');
   jobName = $(jobAnchor).text();
  
  jobLocation = $("li.noBorder").text();
 
  console.log(this.jobUrl);
  console.log(jobName);
  console.log(jobLocation);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   
  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl1">
                SomeTitle1
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation1</li>
    </ul>
  </li>

  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl2">
                SomeTitle2
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation2</li>
    </ul>
  </li>

  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl3">
                SomeTitle3
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation3</li>
    </ul>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

我的问题是在forEach循环中只使用了第一项。为什么会这样？

Answer 1

首先，您的HTML无效。你有一个没有结束标记的开放li。

其次，问题是因为您在循环的每次迭代中查找每个 h3.styleh3。您应该查看当前job中的 。您可以使用find()执行此操作，如下所示：

var jobs = document.getElementsByClassName("offerlist-item");

var jobList = [].slice.call(jobs);
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;

jobList.forEach(function(job) {
  jobAnchor = $(job).find('h3.styleh3').html();
  jobUrl = $(jobAnchor).attr('href');
  jobName = $(jobAnchor).text();

  jobLocation = $(job).find("li.noBorder").text();

  console.log(this.jobUrl);
  console.log(jobName);
  console.log(jobLocation);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl1">SomeTitle1</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation1</li>
    </ul>
  </li>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl2">SomeTitle2</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation2</li>
    </ul>
  </li>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl3">SomeTitle3</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation3</li>
    </ul>
  </li>
</ul>

然而值得注意的是，您使用的是奇怪的原生JS方法和jQuery混合。最好使用其中一个或另一个。这是一个纯粹的jQuery实现：

$('.offerlist-item').each(function() {
  var $job = $(this);
  var $jobAnchor = $job.find('h3.styleh3 a');
  var jobUrl = $jobAnchor.attr('href');
  var jobName = $jobAnchor.text();
  var jobLocation = $job.find("li.noBorder").text();

  console.log(jobUrl);
  console.log(jobName);
  console.log(jobLocation);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl1">SomeTitle1</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation1</li>
    </ul>
  </li>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl2">SomeTitle2</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation2</li>
    </ul>
  </li>
  <li class="offerlist-item">
    <h3 class="styleh3">
      <a href="someUrl3">SomeTitle3</a>
    </h3>
    <ul>
      <li class="noBorder">someLocation3</li>
    </ul>
  </li>
</ul>

Answer 2

有几个问题：

1. 不一定是个问题，但我用简单的jQuery选择器document.getElementsByClassName("offerlist-item")替换了$('.offerlist-item')，这也选择了[].slice.call(jobs)不必要的
2. 无论目前的循环作业是什么，您总是使用选择器$('h3.styleh3')。您现在可以使用$a.find(sel)进行更改。这将找到具有给定选择器“sel”的所有元素，它们是“a”的子元素。

var jobList = $('.offerlist-item');
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;

jobList.each(function() {
  jobAnchor = $(this).find('h3.styleh3').html();
  jobUrl = $(jobAnchor).attr('href');
   jobName = $(jobAnchor).text();
  
  jobLocation = $("li.noBorder").text();
 
  console.log(this.jobUrl);
  console.log(jobName);
  console.log(jobLocation);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   
  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl1">
                SomeTitle1
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation1</li>
    </ul>
  </li>

  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl2">
                SomeTitle2
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation2</li>
    </ul>
  </li>

  <li class="offerlist-item">
        <h3 class="styleh3">
            <a href="someUrl3">
                SomeTitle3
            </a>
        </h3>
    <ul>
      <li><li class="noBorder">someLocation3</li>
    </ul>
  </li>

</ul>