javascript - 如何在每个 div 中找到 的数量

Question

我有一个这种形式的大文件 [整个 div 都相似]。我希望能够选择 div , 找到 ul 的数量在其中并遍历它们中的每一个以获取每个 li 的值在里面。

<div class="experiment">
   <div class="experiment-number">5</div>
   <ul class="data-values">
         <li><div></div> 14</li>
         <li><div></div> 15</li> 
   </ul>
   <ul class="data-values">
        <li><div></div> 16</li>
   </ul> 
</div>

我已经尝试遍历所有实验 div s，然后选择 ul s，但它选择了所有 ul在页面中，不仅是当前div下的那些.

$('experiment ul').eq('$i');

Answer 1

您的 HTML 当前不正确，因为您只是开始新的 <div>和 <ul>元素而不是关闭现有元素。忽略它，因为修复起来很简单，我们将继续解决真正的问题。

您需要选择所有 <div class="experiment">元素，然后遍历它们。为此，您可以使用 .each()功能。它可能看起来像这样:

var experiments = $('.experiment'); // all of them

experiments.each(function(i, val) { // will iterate over that list, one at a time
    var experiment = $(this); // this will be the specific div for this iteration
    console.log("Experiment: " + experiment.find('.experiment-number').text());
    // outputs the experiment number
    console.log("Experiment ULs: " + experiment.find('ul').length);
    // number of <ul> elements in this <div>
    var total = 0;
    experiment.find('ul.data-values li').each(function() {
        total += parseInt($(this).text(), 10);
    });
    console.log("Experiment total: " + total);
    // outputs the total of the <li> elements text values
});

看看this jsFiddle demo .