Question

我有一个简单的条形图，如下所示， - 每个条形图都是父div中包含的简单div。我想遍历父div并提取值data-cat属性以进行进一步处理。

<div class="chart">
  <!-- other stuff here.... -->
  <div class="graph">
    <div id="b-2_1" class="bar" data-cat="1" style="width: 80%;">4</div>
    <div id="b-2_2" class="bar" data-cat="3" style="width: 80%;">4</div>
    <div id="b-2_3" class="bar" data-cat="6" style="width: 80%;">4</div>
    <div id="b-2_4" class="bar" data-cat="9" style="width: 80%;">4</div>
  </div>
</div>

到目前为止，我已经尝试过querySelectorAll的变种而没有成功 - 我不知不觉地弄乱了语法。

 //finds chart within a parent div not shown above
 var chart = $('#comment-' + index).find('.chart'); 

//var everyChild = document.querySelectorAll('.graph');
var everyChild = chart.querySelectorAll('.graph');
for (var i = 0; i<everyChild.length; i++) {
    console.log(everyChild[i]);
}

document.querySelectorAll('.graph');会返回一个结果，但由于页面上有多个图表，因此会返回多个结果。如何使用chart作为参考点o我可以在单个图表上获取数据？目前它正在返回错误chart.querySelectorAll('.graph') is not a function

提前致谢...

Answer 1

jQuery很棒，如果可能的话应该使用，以下是给定DOM中的遍历方式。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart">
  <!-- other stuff here.... -->
  <div class="graph">
    <div id="b-1_1" class="bar" data-cat="2" style="width: 80%;">2</div>
    <div id="b-1_2" class="bar" data-cat="4" style="width: 80%;">2</div>
    <div id="b-1_3" class="bar" data-cat="6" style="width: 80%;">2</div>
    <div id="b-1_4" class="bar" data-cat="8" style="width: 80%;">2</div>
  </div>
  <div class="graph">
    <div id="b-2_1" class="bar" data-cat="1" style="width: 80%;">4</div>
    <div id="b-2_2" class="bar" data-cat="3" style="width: 80%;">4</div>
    <div id="b-2_3" class="bar" data-cat="6" style="width: 80%;">4</div>
    <div id="b-2_4" class="bar" data-cat="9" style="width: 80%;">4</div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以将querySelector本身更改为：

document.querySelectorAll('.chart .graph');

此外，您应该查看querySelectorAll()的文档，它返回NodeList，您可以通过调用NodeList .forEach()上的everyChild来执行NodeList循环。

即使这应该是一个解决方案，我建议使用像jQuery这样的东西。

最好的问候。

Answer 3

尝试将ID添加到父div：

<div class="graph" id="graph1">
    <div id="b-2_1" class="bar" data-cat="1" style="width: 80%;">4</div>
    <div id="b-2_2" class="bar" data-cat="3" style="width: 80%;">4</div>
    <div id="b-2_3" class="bar" data-cat="6" style="width: 80%;">4</div>
    <div id="b-2_4" class="bar" data-cat="9" style="width: 80%;">4</div>
</div>

然后再做

$("#graph1").children().each(function () {
    var cat = $(this).data("cat");
    var text = $(this).text();
});

获取父级中的div列表（querySelectorAll）

3 个答案: