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

Posted 2021-05-03

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

<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中的每个输入都被填充，而不是空的）。

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

答案

我假设你想使用jQuery，我已经改变了你的html代码以使其工作。 Ids应该是独一无二的。

<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并将上面的代码嵌套在其中。

另一答案

试试这段代码，

    <script>
    $(document).ready(function () {
        var FieldShellelements = $("#container .field_shell");
        for (i = 0; i < FieldShellelements.length; i++) {
            alert($(FieldShellelements[i]).children('input').length);
        }
    });
</script>

另一答案

但是z zxswい

我希望这就是你想要的

HTML

FIDDLE

jQuery的

    <div id="container">

 <div class="field_shell">

   <label for="name">Name</label>
   <input type="text" name="name" id="name" value="demo" class="field">

 </div>

 <div class="field_shell">

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

 </div>

</div>

另一答案

您应该尝试在页面上保持ID唯一，因为 var count=0; $('#container').find('input[type="text"]').each(function(){ if ($.trim($(this).val()).length) { count+=1 alert("Filled Value="+$(this).val()); } }); alert("Total Input Count="+$('#container').find('input[type="text"]').length+"//Filled Inputs Count="+count); 将只匹配第一个实例（而$("#container")将获取所有这些）。

$("[id='container']")

// Gather all containers that have all inputs filled var allInputsFilled = $("[id='container']").filter(function () { var allFilled = true, inputs = $(this).find("input"); inputs.each(function () { // !val() equates to true when the value is empty // '' is a falsy value, inverted with ! not operator if (!$(this).val()) { allFilled = false; return false; // break out of loop early } }); return allFilled; }); 将包含所有填充所有输入的allInputsFilled div。 #container。