Mithilfe von jQuery zu zählen Sie alle Eingänge verschachtelte div

Ich ein setup haben, im Grunde wie diese:

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

Außer in einem größeren Maßstab, gibt es drei Sätze von #container jeder #container hielt verschiedene (und unterschiedliche Mengen) div.field_shell Elemente. Die meisten div.field_shell halten nur einen Eingang, aber ein paar halten, zwei separate input-Elemente.

Mein Problem ist, wie kann ich die Anzahl der input-Elemente, die in jedem #content. Bonus-Punkte für geben einige Einblicke auf die beste Methode, zu überprüfen, wenn jede Eingabe in jedem #div-container ist gefüllt, und die Rückkehr zu bestimmten Ergebnissen, wenn so.

Ich gehe davon aus .length tragfähig ist, hier aber bin ich ratlos. Vor allem auf die überprüfung der "status" der einzelnen #container (nach status, ich meine, wenn jede Eingabe in das #container gefüllt ist und nicht leer ist).

Danke Jungs so viel für das Lesen, und danke noch mehr für die Unterstützung 🙂

In Ihrem html ich nicht gesehen #content
Sie könnte bekommen haben die Länge des input-Elements, die ist 0, wenn unbesetzt.

InformationsquelleAutor Alix Përry | 2014-01-30

2

Ich nehme an, Sie verwenden möchten, jQuery, ich habe mich verändert Ihren HTML-code ein wenig, damit es funktioniert. Ids sollten eindeutig sein.
```
<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>
```
und der jQuery-code, um die Zahl jedes #container Es durchziehen wird der DOM-Baum und die Rückkehr der alle Elemente, die übereinstimmen input
```
var inputs = $("#container").find($("input") );
console.log(inputs.length)
```
Wenn Sie prüfen möchten gefüllt input-Elemente, Sie können sich an der element.length Eigenschaft. Zählen mehrere Behälter, man könnte eine Schleife zum verarbeiten jedes #container nest und den obigen code in es.

InformationsquelleAutor quik_silv

versuchen, diesen code,

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

InformationsquelleAutor Anoop Joshi

Demo FIDDLE

Ich hoffe das ist was du willst

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

InformationsquelleAutor P.Sethuraman

Sollten Sie versuchen, hält IDs auf einer Seite eindeutig, da $("#container") wird immer nur die erste Instanz (in der Erwägung, dass $("[id='container']") Holen alle von Ihnen).

//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 enthält alle #container divs, die haben alle Ihre Eingaben gefüllt. Demo.

InformationsquelleAutor Tim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.