CODEWITHSUNDEEP
javascriptjqueryhtmldom
codewelldesign
codewelldesign

Reputation: 41

Selecting element inside of a jQuery each() function

I am looping through a specific element and storing values from each element using jQuery .each() function. I am successful in pulling two values, but after that, I am getting undefined errors and have been stuck on this.

The element I am looping through is "pod-listing", so I use this...

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

And this works successfully. However, when I try to get the text inside the "article-info" div and the text inside the tag, I am unsuccessful. I have tried every combination I can think of to get these values. Using this current syntax of looping through my "pod-listing" divs (there are multiple of these on the page, this is just the first one in the example), how can I get the values of the "article-info" class and the element?

Upvotes: 0

Views: 59

Answers (3)

Mamun
Mamun

Reputation: 68933

You can simply target the element with class and (or tagName) and use .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>

Upvotes: 1

Tamas Szoke
Tamas Szoke

Reputation: 5542

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

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

Get article-info div text:

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

Get small tag text:

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

DEMO:

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

Upvotes: 1

Related Questions