So erhalten Sie alle untergeordneten Eingaben eines div-Elements (jQuery)

158

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

Ich muss alle Eingänge in der jeweiligen div auswählen.

Das funktioniert nicht:

var i = $("#panel > :input");
user137348
quelle

Antworten:

301

Verwenden Sie es ohne das Größere als:

$("#panel :input");

Das >bedeutet nur direkte Kinder des Elements, wenn Sie alle Kinder unabhängig von der Tiefe wollen, verwenden Sie einfach ein Leerzeichen.

Nick Craver
quelle
3
Interessant ... Jetzt bin ich verwirrt ... Das :ist für Pseudoklassen, nicht wahr? Wir wollen aber einen Elementtyp auswählen. Warum das :?
Mnemosyn
11
@mnemosyn - Dies ist eine andere Art von Selektor wie `: checkbox ', siehe hier für Details: api.jquery.com/input-selector Und hier ist eine vollständigere Liste von diesen: api.jquery.com/category/selectors/form -selectors
Nick Craver
74

Du brauchst

var i = $("#panel input"); 

oder je nachdem, was genau Sie wollen (siehe unten)

var i = $("#panel :input"); 

Der >Wille beschränkt sich auf Kinder, Sie wollen alle Nachkommen.

EDIT: Wie Nick betonte, gibt es einen subtilen Unterschied zwischen $("#panel input")und $("#panel :input).

Die erste wird nur Elemente vom Typ Eingabe abzurufen, das heißt <input type="...">, aber nicht <textarea>, <button>und <select>Elemente. Danke Nick, wusste das selbst nicht und korrigierte meinen Beitrag entsprechend. Ich habe beide Optionen verlassen, weil das OP das wohl auch nicht bemerkt hat und - technisch gesehen - nach Eingaben gefragt hat ... :-)

Mnemosyn
quelle
Also: Eingabe wählt alle Eingabe- / Auswahl- / Textbereichsfelder aus? Alles auf einmal?
Yuri
Im Wesentlichen ja. Der Selektor gibt eine Reihe von Übereinstimmungen zurück, also könnte man sagen, dass er es "sofort" macht, obwohl ich nicht ganz sicher bin, was Sie damit meinen ...
mnemosyn
1
Ich meine, "alle zusammen" mit nur diesem Selektor. ": Eingabeauswahl Beschreibung: Wählt alle Eingabe-, Textbereichs-, Auswahl- und Schaltflächenelemente aus." Wusste nichts davon, ich werde es von nun an benutzen :)
Yuri
50

Die 'find'-Methode kann verwendet werden, um alle untergeordneten Eingaben eines Containers abzurufen, der bereits zwischengespeichert wurde, um zu verhindern, dass er erneut nachgeschlagen wird (während die' children'-Methode nur die unmittelbaren untergeordneten Elemente abruft). z.B

var panel= $("#panel");
var inputs = panel.find("input");
Rob Willis
quelle
5
Dies war perfekt für mich - ich durchlaufe Elemente mit .each (), was bedeutet, dass ich innerhalb der Schleife mit $ (this) auf das aktuelle Element zugreife. Infolgedessen kann ich nicht viel von dem ausführen, was sonst in den Antworten vorgeschlagen wird. - Stattdessen kann ich $ (this) .find ("input") ausführen. Vielen Dank.
DJBP
29

Wenn Sie ein Framework wie Ruby on Rails oder Spring MVC verwenden, müssen Sie möglicherweise Divs mit eckigen Klammern oder anderen Zeichen verwenden, die Sie nicht verwenden dürfen. document.getElementByIdDiese Lösung funktioniert weiterhin, wenn Sie mehrere Eingaben mit demselben Typ haben.

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

Dieses Beispiel zeigt, wie Sie die Eingaben löschen. Sie müssen sie beispielsweise ändern.

Paulo Fidalgo
quelle
9
var i = $("#panel input");

sollte arbeiten :-)

das> holt nur direkte Kinder, keine Kinderkinder
das: dient zur Verwendung von Pseudoklassen, z. : schweben usw.

Informationen zu verfügbaren CSS-Selektoren von Pseudoklassen finden Sie hier: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Phil Rykoff
quelle
6
@henchman - :inputist auch ein Selektor, api.jquery.com/category/selectors/form-selectors Wenn er einen <textarea>oder-Button inputhätte, :inputwürde er ihn nicht finden, würde es also einen Unterschied geben.
Nick Craver
+1, also wird das Auslassen von> den Trick machen. Jetzt habe ich es auch auf der Seite gefunden, die ich empfohlen habe ....
Phil Rykoff
9

Hier ist mein Ansatz:

Sie können es in anderen Fällen verwenden.

var id;
$("#panel :input").each(function(e){	
  id = this.id;
  // show id 
  console.log("#"+id);
  // show input value 
  console.log(this.value);
  // disable input if you want
  //$("#"+id).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="Po Val" /></td>
    </tr>
  </table>
</div>

Uttam Kumar Roy
quelle