javascript - jQuery - 循环嵌套元素

Question

我有多个具有相同类名 (listing_class) 的 div 元素。我需要的是分别获取所有 div 元素中每个 anchor 标记的 href 值。

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>

问题是，它仅返回第一个 div 的 anchor 值，并且不会进一步循环。

提前致谢。

Answer 1

基本上，更好的解决方案是找到 .list_class 类下的所有 a 元素，如果您使用以下 jQuery 选择器 $('.listing_class a') 所有 a 标记。然后可以使用它来迭代所有必需的项目并获取每个元素的 href 属性。

也许您可以尝试以下方法:

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

希望这会有所帮助!