[英]How to find number of <ul> inside each div
I have a large file of this form [similar div's throughout]. 我有一个这种形式的大文件[类似div的整个]。 I want to be able to select a
div
, find the number of ul
's in it and traverse through each of them to get value of each li
in it. 我希望能够选择一个
div
,找到其中的ul
的数量并遍历每个div
以获得其中每个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>
I have tried looping through all experiment div
s, then select the ul
s, but it selects all the ul
in the page, not only the ones under current div
. 我已经尝试循环遍历所有实验
div
,然后选择ul
s,但它选择页面中的所有ul
,而不仅仅是当前div
下的ul
。
$('experiment ul').eq('$i');
Your HTML is currently incorrect, since you're simply starting new <div>
and <ul>
elements rather than closing the existing ones. 您的HTML当前不正确,因为您只是启动新的
<div>
和<ul>
元素而不是关闭现有元素。 Ignoring that because it's trivial to fix, we'll move on to the real issue. 忽略这一点,因为修复它是微不足道的,我们将继续讨论真正的问题。
You need to select all of the <div class="experiment">
elements, then iterate through them. 您需要选择所有
<div class="experiment">
元素,然后迭代它们。 To do that you can use the .each()
function. 为此,您可以使用
.each()
函数。 It might look something like this: 它可能看起来像这样:
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
});
Take a look at this jsFiddle demo . 看看这个jsFiddle演示 。
to get all the ul inside div.experiment 得到div.experiment中的所有ul
var ul = $('.experiment').find('ul');
and to get all li elements inside each ul found above 并获取上面找到的每个ul内的所有li元素
ul.each(function(list) {
var li = $(list).find('li');
});
$('.experiment').each(function() {
var cnt = $(this).children('ul').length;
$(this).find('.experiment-number').text(cnt);
});
First of all you need to work out the correct selector for each DIV. 首先,您需要为每个DIV计算出正确的选择器。
The selector you want is: 你想要的选择器是:
".experiment"
Notice the .
请注意
.
to denote a class selector. 表示类选择器。
This will allow you access to each DIV element. 这将允许您访问每个DIV元素。 If you then want to loop though each of these, you can do so like this:
如果你想循环遍历其中的每一个,你可以这样做:
$(".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");
});
});
IMPORTANT : There is also an error with your HTML, you need to close your <ul>
elements correctly using </ul>
重要提示 :HTML也存在错误,您需要使用
</ul>
正确关闭<ul>
元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.