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

Answer 2

试试这段代码，

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

Answer 3

演示FIDDLE

我希望这就是你想要的

<强> HTML

    <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>

<强> Jquery的

    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);

Answer 4

您应该尝试在页面上保持唯一ID，因为$("#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将包含已填写所有输入的所有#container div。 Demo

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

4 个答案: