CODEWITHSUNDEEP
javascriptjqueryeach
Syed Saqlain
Syed Saqlain

Reputation: 584

jQuery - Loop through nested elements

I have multiple div elements having same class name (listing_class). What I need is to get href value of each anchor tag in all div elements respectively.

var length = $(".listing_class").length;

for (var i = 0; i < length; i++) {
  $(".listing_class").each(function() {
    console.log($(this).children('a').attr('href'));
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing_class " style="display: none;">
  <a href="?section=all&status=active" class="active"> All Listings</a>
  <a href="?section=sale&status=active" class="active"> For Sale (0)</a>
  <a href="?section=rent&status=active" class="active"> For Rent (0)</a>
</div>
<div class="listing_class " style="display: none;">
  <a href="?section=a&status=p" class="active"> a</a>
  <a href="?section=b&status=p" class="active"> b</a>
  <a href="?section=c&status=p" class="active"> c</a>
</div>
<div class="listing_class " style="display: none;">
  <a href="?section=QQ&status=FF" class="active"> a</a>
  <a href="?section=FF&status=FF" class="active"> b</a>
  <a href="?section=VV&status=FF" class="active"> c</a>
</div>
<div class="listing_class " style="display: none;">
  <a href="?section=WW&status=p"> VV</a>
  <a href="?section=WW&status=p"> CC</a>
  <a href="?section=WW&status=p"> AQ</a>
</div>
<div class="listing_class " style="display: none;">
  <a href="?section=A&status=p"> VV</a>
  <a href="?section=B&status=p"> CC</a>
  <a href="?section=X&status=p"> AQ</a>
</div>

Problem is, it returns anchor values of first div only and doesn't loop further.

Thanks in advance.

Upvotes: 0

Views: 470

Answers (1)

norbitrial
norbitrial

Reputation: 15176

Basically a better solution would be to find all the a elements under .list_class class is if you find with the following jQuery selector $('.listing_class a') all the a tags. Then this can be used to iterate through all the necessary items and get the href attribute of each elements.

Maybe you can try the following:

$('.listing_class a').each(function(lc) {
  console.log($(this).attr('href'));
});
<div class="listing_class " style="display: none;">
    <a href="?section=all&status=active" class="active"> All Listings</a>
    <a href="?section=sale&status=active" class="active"> For Sale (0)</a>
    <a href="?section=rent&status=active" class="active"> For Rent (0)</a>
</div>
<div class="listing_class " style="display: none;">
    <a href="?section=a&status=p" class="active"> a</a>
    <a href="?section=b&status=p" class="active"> b</a>
    <a href="?section=c&status=p" class="active"> c</a>
</div>
<div class="listing_class " style="display: none;">
    <a href="?section=QQ&status=FF" class="active"> a</a>
    <a href="?section=FF&status=FF" class="active"> b</a>
    <a href="?section=VV&status=FF" class="active"> c</a>
</div>
<div class="listing_class " style="display: none;">
    <a href="?section=WW&status=p" > VV</a>
    <a href="?section=WW&status=p" > CC</a>
    <a href="?section=WW&status=p" > AQ</a>
</div>
<div class="listing_class " style="display: none;">
    <a href="?section=A&status=p"> VV</a>
    <a href="?section=B&status=p"> CC</a>
    <a href="?section=X&status=p"> AQ</a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

I hope this helps!

Upvotes: 3

Related Questions