Comment obtenir toutes les entrées enfants d'un élément div (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>

J'ai besoin de sélectionner toutes les entrées dans le div particulier.

Cela ne fonctionne pas:

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

Utilisez-le sans le plus grand que:

$("#panel :input");

Les >moyens ne dirigent que les enfants de l'élément, si vous voulez que tous les enfants, quelle que soit la profondeur, utilisez simplement un espace.

Vous avez besoin

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

ou , selon ce que vous voulez exactement (voir ci-dessous)

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

le >limitera aux enfants, vous voulez tous les descendants.

EDIT: Comme Nick l'a souligné, il y a une différence subtile entre $("#panel input")et $("#panel :input).

Le premier ne récupérera que les éléments de type input, c'est-à-dire <input type="...">, mais pas <textarea>, <button>et les <select>éléments. Merci Nick, je ne le savais pas moi-même et j'ai corrigé mon message en conséquence. J'ai laissé les deux options, parce que je suppose que l'OP n'en était pas non plus conscient et - techniquement - a demandé des entrées ... :-)

La méthode 'find' peut être utilisée pour obtenir toutes les entrées enfants d'un conteneur qui a déjà été mis en cache pour éviter de le rechercher à nouveau (alors que la méthode 'children' ne récupérera que les enfants immédiats). par exemple

var panel= $("#panel");
var inputs = panel.find("input");

Si vous utilisez un framework comme Ruby on Rails ou Spring MVC, vous devrez peut-être utiliser des div avec des accolades carrées ou d'autres caractères, qui ne sont pas autorisés, vous pouvez les utiliser document.getElementByIdet cette solution fonctionne toujours si vous avez plusieurs entrées du même type.

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

Cet exemple montre comment effacer les entrées, par exemple, vous devrez le changer.

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

devrait marcher :-)

le> ne récupérera que les enfants directs, pas les enfants des enfants
le: est pour utiliser des pseudo-classes, par exemple. : survol, etc.

vous pouvez en savoir plus sur les sélecteurs css disponibles de pseudo-classes ici: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

voici ma démarche:

Vous pouvez l'utiliser dans d'autres cas.

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>