Выбор элемента внутри функции jQuery each ()

Question

Я перебираю указанный элемент c и сохраняю значения из каждого элемента, используя функцию jQuery .each (). Я успешно вытащил два значения, но после этого я получаю неопределенные ошибки и застрял на этом.

Элемент, через который я зацикливаюсь, - это «pod-list», поэтому я использую это ...

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

И это успешно работает. Однако, когда я пытаюсь получить текст внутри div «article-info» и текст внутри тега, у меня ничего не получается. Я перепробовал каждую комбинацию, чтобы придумать эти значения. Используя этот текущий синтаксис циклического выполнения моих div'ов «pod-list» (их несколько на странице, это только первый пример), как я могу получить значения класса «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

Вы можете просто нацелить элемент с помощью класса и (или 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>