在 jQuery each() 函数中选择元素

Question

我正在遍历特定元素并使用 jQuery .each() 函数存储每个元素的值。我成功地提取了两个值，但在那之后，我遇到了未定义的错误并且一直停留在这个问题上。

我循环的元素是“pod-listing”，所以我用这个...

$(".pod-listing").each(function (i, obj) {
  alert($(this).find('div a').attr('title'));
  alert($(this).find('div a').attr('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pod-listing">
  <div class="pod-listing-header">
    <a href="https://www.example.com/inward/record.uri?partnerID=890sj&amp;scp=7889706&amp;origin=inward"
       title="Guidelines on the use of current (rJKD)">
      </a>
    <div class="article-info">Volume 128, Issue 1, January 2017</div>
  </div>
  <small>
    Bob Smith | Sally Sue | John Jones  
  </small>
</div>

这很成功。但是，当我尝试获取“article-info” div 内的文本和标签内的文本时，我没有成功。我已经尝试了所有我能想到的组合来获得这些值。使用当前循环遍历我的“pod-listing”div 的语法（页面上有多个，这只是示例中的第一个），如何获取“article-info”类的值和元素？

Answer 1

获取article-info div 文字：

$(".pod-listing").each(function(i, obj) {
   alert($(this).find('div .article-info').text());
});

获取small标签文字：

$(".pod-listing").each(function(i, obj) {
   alert($(this).find('small').text());
});

演示：

$(".pod-listing").each(function(i, obj) {
  console.log($(this).find('div .article-info').text());
  console.log($(this).find('small').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="pod-listing">
  <div class="pod-listing-header">
    <a href="https://www.example.com/inward/record.uri?partnerID=890sj&amp;scp=7889706&amp;origin=inward" title="Guidelines on the use of current (rJKD)">
    </a>
    <div class="article-info">Volume 128, Issue 1, January 2017</div>
  </div>
  <small>Bob Smith | Sally Sue | John Jones</small>
</div>

Answer 2

使用.html():

$(".pod-listing").each(function(i, obj){
  alert($(this).find('div a').attr('title'));
  alert($(this).find('div a').attr('href'));
  alert($(this).find('.article-info').html());
  alert($(this).find('small').html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pod-listing">
  <div class="pod-listing-header">
    <a href="https://www.example.com/inward/record.uri?partnerID=890sj&amp;scp=7889706&amp;origin=inward" title="Guidelines on the use of current (rJKD)">
    </a>
    <div class="article-info">Volume 128, Issue 1, January 2017</div>
  </div>
  <small>
    Bob Smith | Sally Sue | John Jones  
  </small>
</div>

Answer 3

您可以简单地使用 class 和（或 tagName）定位元素并使用 .text()

var articleInfo = $(this).find('div.article-info').text();
var smallInfo = $(this).find('small').text();

$(".pod-listing").each(function(i, obj){
   console.log($(this).find('div.article-info').text());
   console.log($(this).find('small').text().trim());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pod-listing">
  <div class="pod-listing-header">
    <a href="https://www.example.com/inward/record.uri?partnerID=890sj&amp;scp=7889706&amp;origin=inward" title="Guidelines on the use of current (rJKD)"></a>
    <div class="article-info">Volume 128, Issue 1, January 2017</div>
  </div>
  <small>
    Bob Smith | Sally Sue | John Jones  
  </small>
</div>