使用 jQuery 计算嵌套在 div 中的所有输入

Question

我的设置基本上是这样的：

<div id="container">
    <div class="field_shell">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="field">
    </div> 
    <div class="field_shell">
        <label for="age">Age</label>
        <input type="text" name="age" id="name" class="field"> 
    </div>
</div>

除了更大的范围外，还有三组#container，每组都包含#container几个（不同数量的） div.field_shell 元素。大多数 div.field_shell 只保存一个输入，但少数确实保存了两个单独的输入元素。

我的问题是如何计算每个#content 中输入元素的数量。对检查每个#container div 中的每个输入是否已填充的最佳方法有一些深入了解的奖励积分，如果是，则返回特定结果。

我认为.length在这里可行，但我很难过。特别是在检查每个的“状态”时#container（通过状态，我的意思是其中的每个输入是否#container已填充，而不是空的）。

非常感谢你们通读，更感谢你们的帮助:)

Answer 1

我假设您想使用 jQuery，我已经稍微更改了您的 HTML 代码以使其工作。ID 应该是唯一的。

<div id="container">
    <div class="field_shell">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="field"/>
    </div>
    <div class="field_shell">
        <label for="age">Age</label>
        <input type="text" name="age" id="age" class="field"/>
    </div>
</div>

以及为每个计数的 jQuery 代码#container，它将遍历 DOM 树并返回所有匹配的元素input

var inputs = $("#container").find($("input") );
console.log(inputs.length)

如果要检查填充的输入元素，可以查看element.length属性。要计算多个容器，您可以运行一个循环来处理每个容器#container并将上面的代码嵌套在其中。