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

【问题标题】：count immediate child elements using jquery with a variable使用带有变量的jquery计算直接子元素
【发布时间】：2012-01-24 12:50:18
【问题描述】：

这个问题与这个问题相似（但不准确）： 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");

【问题讨论】：

你只想要数组长度吗？
那是无效的 HTML 代码。您不能将 UL 作为 UL 的子项... UL 元素的内容模型是 LI 元素。
另外，< 和标签名之间不能有空格...
@Hexxagonal - 是的，我想知道 Presentsforperson1 的大小（

【解决方案1】：

如果人员 ID 是包含他们的礼物的 ul 的 ID，那么只需：

$('#personId > li').length

会做的。

更新

或者如果 id 在变量中：

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

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

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

但我个人觉得带有 .children 调用的版本更具可读性。

【讨论】：

如果id在变量中，你知道语法吗？

【解决方案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;

【讨论】：

【解决方案3】：

您可以执行以下操作（给代表礼物的 lis 一个 css 类）：

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

alert(presents.length);

【讨论】：