javascript - 如何从一组标签中抓取数据内容？

Question

所以，我有一个外部 div，我们称它为 #outerdiv . #outerdiv 里面是一组 <a>标签。这些标签是异步生成的，将在用户按下按钮后测试内容。没有<a>标签是彼此的 child ，它们都是#outerdiv 的 child 。每个<a>有一个名为 data-content 的属性, 每个都等于一个数。也在每个<a>里面tag 是另一个 div，它有一堆类。其中一些标签有一个名为 .active 的特定类在里面。我只想要 data-content带有 .active 的标签类(Class)后裔。我想把它们放在一个数组或一些简单的东西中。所以这是一个例子:

<div id = "outerdiv" > 
    <a data-content = "1">
        <div class="classX active"></div>
    </a>
    <a data-content = "2">
        <div class="classX"></div>
    </a>
    <a data-content = "3">
        <div class="classX"></div>
    </a>
    <a data-content = "4">
        <div class="classX"></div>
    </a>
    <a data-content = "5">
        <div class="classX active"></div>
    </a>

</div>

所以我只想要 1 的数据内容和 5 .

到目前为止，我知道我可以使用 .on 来检查异步标签和 .data("content") 来获取数据内容。我正在考虑一个 for 循环来检查我的 #outerdiv 中的内容，但我不知道该怎么做。

Answer 1

只需要选择器 #outerdiv a div.active 来获取最里面的 div，然后获取它们的父级:

var $aTags = $('#outerdiv a div.active').parent();
$aTags.each(function(i,a) {
  console.log($(a).attr('data-content'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerdiv">
  <a data-content="1">
    <div class="classX active"></div>
  </a>
  <a data-content="2">
    <div class="classX"></div>
  </a>
  <a data-content="3">
    <div class="classX"></div>
  </a>
  <a data-content="4">
    <div class="classX"></div>
  </a>
  <a data-content="5">
    <div class="classX active"></div>
  </a>

</div>