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

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

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.

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 ... :-)

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

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.

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

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>