javascript - forEach 只使用第一个元素

Question

我得到了某种 HTML 代码作为列表，每个列表项中都有链接。我想获得那些带有 JavaScript 的，并且只先记录它们以备后用。这是一个包含标题、链接和位置的职位列表。

代码看起来像这样:

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);
});

<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>

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

Answer 1

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

其次，问题在于您在循环的每次迭代中查找每个 h3.styleh3。相反，您应该查看当前 job 中的 inside。您可以使用 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>

但是值得注意的是，您使用的是 native 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>