web-dev-qa-db-fra.com

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>

Je dois sélectionner toutes les entrées dans le div particulier.

Cela ne fonctionne pas:

var i = $("#panel > :input");
jqueryjquery-selectors
142
user137348

Utilisez-le sans plus grand que:

$("#panel :input");

Le > signifie seulement direct enfants de l'élément, si vous voulez que tous les enfants, quelle que soit leur profondeur, utilisez simplement un espace.

278
Nick Craver

Vous avez besoin

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

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

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

le > sera limité aux enfants, vous voulez tous les descendants.

EDIT: Comme Nick l’a fait remarquer, il existe 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 les éléments <input type="...">, mais pas les éléments <textarea>, <button> et <select>. Merci Nick, je ne le savais pas moi-même et j'ai corrigé mon message en conséquence. A laissé les deux options, parce que je suppose que le PO n'était pas au courant de cela non plus et -techniquement- a demandé des entrées ... :-)

70
mnemosyn

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 afin de sauvegarder sa recherche ultérieure (alors que la méthode 'children' obtiendra uniquement les enfants immédiats). par exemple.

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

Si vous utilisez un framework tel que Ruby sur Rails ou Spring MVC, vous devrez peut-être utiliser des divs avec des accolades ou d'autres caractères qui ne sont pas autorisés. Vous pouvez utiliser document.getElementById et cette solution fonctionne toujours si vous avez plusieurs entrées avec le 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 modifier.

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

devrait marcher :-)

le> n'ira que directement aux enfants, pas d'enfants
the: sert à utiliser des pseudo-classes, par exemple. : vol stationnaire, etc.

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

9
Phil Rykoff

voici mon approche:

Vous pouvez l'utiliser dans un autre événement.

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>
8
Uttam Kumar Roy