jQuery - Loop through nested elements

Question

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.

Answer 1

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!