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的值。

ul

我尝试循环遍历所有实验ul，然后选择div，但它会选择页面中的所有$('experiment ul').eq('$i');，而不仅仅是当前{{1}下的{{1}} }}。

{{1}}

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>个元素

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

4 个答案: