Question

所以，我有一个外部div，我们称之为#outerdiv。 #outerdiv内部是一组<a>标签。这些标签是异步生成的，用户按下按钮后将对内容进行测试。 <a>标签中没有一个是彼此的孩子，他们都是#outerdiv的孩子。每个<a>都有一个名为data-content的属性，每个属性都等于一个数字。每个<a>标签内部还有另一个div，它有一堆类。其中一些标记内部有一个名为.active的特定类。我只想要data-content类后代的.active标签。我想把它们放在一个数组或简单的东西中。所以这是一个例子：

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

Answer 2

使用JQuery实现这一点非常容易。

var elements = [];
var $data = $('.classX.active').closest('a');
for(var i = 0; i < $data.length; i++){
    var value = $($data[i]).attr('data-content');
    elements.push(value);
}
console.log(elements);

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

Answer 3

如果您正在使用jQuery，您可以先使用$（“。active”）选择所有活动元素，然后您可以链接parents方法以获取每个活动元素的所有anchor父元素。如果是父母，请参阅jQuery Api。因此，您可以使用$（“。active”）。parent（“a”）来获取所有父母。您还可以在此处添加更具描述性的类，以避免获得更高级别的父级。获得父项列表后，您可以简单地遍历列表并使用Data()

获取数据元素

如何从一组代码中获取数据内容？

3 个答案: