Question

这个问题类似于这个问题（但不完全相同）： Count immediate child div elements using jQuery

我有一堆列表代表不同人的圣诞礼物。例如，这是一个人的礼物列表。请注意，可以添加新人

<ul id = "presents">
<li id = "person1" >
<ul id = "presentsforperson1">
<li id = "present1" >
<ul id = "present1info">
<li> Present 1 </li>
<li> A New Pair of Shoes </li>
<li> $19.99 </li>
</ul>
</li>
<!-- More presents for person 1 can be added here dynamically-->
</ul>
</li>
<!-- More people can be added here -->
</ul>

与发布的问题不同，我在一个名为drop（droppable）的变量中有对象presentforperson1。我想知道用这个变量找出人1的礼物数量（在这种情况下是1）的正确语法是什么？

这是我到目前为止所尝试的：

 var numberofPresents = $(drop + "ul > li").length; //drop holds li#presentsforperson1 .droppable
 var numberofPresents = $(dropid + "ul > li").length; //dropID is $(drop).attr("id");

Answer 1

如果person id是包含其礼物的ul的id，则只需：

$('#personId > li').length

会这样做。

<强>更新

或者如果id在变量中：

$('#' + personId).children('ul').length

你显然可以将子选择器附加到选择器字符串，例如：

$('#' + personId + ' > ul').length

但我个人认为.children调用的版本更具可读性。

Answer 2

假设您的drop变量引用了一个jQuery对象：

var quantity = drop.children().length;

如果它有原始DOM元素：

var quantity = $(drop).children().length;

如果它只是一个带有ID的字符串，没有ID选择器语法：

var quantity = $('#' + dropid).children().length;

或者你可以像以前那样进行连接：

var quantity = $('#' + dropid + " > li").length;

Answer 3

您可以执行以下操作（提供代表当前css类的li）：

var presents = $('ul[id="person1"]').children('li.presentClass');

alert(presents.length);

使用带有变量的jquery计算直接子元素

3 个答案: