jquery - 使用 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>

和对每个#container进行计数的jQuery代码，它将遍历DOM树并返回与input匹配的所有元素

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

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