如何在每个 div 中查找 <ul> 的数量

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>

我尝试循环遍历所有实验divs，然后选择uls，但它会选择页面中的所有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。

Answer 2

获取 div.experiment 中的所有 ul

var ul = $('.experiment').find('ul');

并获取上面找到的每个 ul 中的所有 li 元素

ul.each(function(list) {
 var li = $(list).find('li');
});

Answer 3

$('.experiment').each(function() {
    var cnt = $(this).children('ul').length;
    $(this).find('.experiment-number').text(cnt);
});

Answer 4

首先，您需要为每个 DIV 制定正确的选择器。

你想要的选择器是：

".experiment"

注意. 表示一个类选择器。

这将允许您访问每个 DIV 元素。如果你想循环遍历每一个，你可以这样做：

$(".experiment").each(function(){
   var div = $(this);

   var elementsInThisDiv = div.find("ul");
   //you now have a list of all UL elements in the current DIV only

   var numberOfElements = elementsInThisDiv.length;
   //you now have a count of UL elements belonging to this DIV only

   //you can loop the UL elements here
   $(elementsInThisDiv).each(function(){
       var ul = $(this);
       //do something with the UL element

       //like get the LI elements...
       var liElements = ul.find("li");
   });
});

---

重要提示：您的 HTML 也有错误，您需要使用 </ul> 正确关闭您的 <ul> 元素