Comment obtenir toutes les entrées enfants d’un élément div (jQuery)

HTML:

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

Le > signifie que seuls les enfants directs de l’élément, si vous voulez tous les enfants, peu importe 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 > restreindra 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 extrait uniquement les éléments de type input, à savoir les éléments , mais pas les éléments , et . Merci Nick, ne le savais pas moi-même et corrigé mon message en conséquence. A laissé les deux options, parce que je suppose que l’OP n’était pas au courant de cela non plus 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 chercher à nouveau (alors que la méthode ‘children’ n’obtiendra 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, vous ne pouvez pas utiliser document.getElementById et 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> ira seulement chercher les enfants directs, pas les enfants des enfants
le: permet d’utiliser des pseudo-classes, par exemple. : vol stationnaire, etc.

Vous pouvez lire sur les sélecteurs CSS disponibles pour les pseudo-classes ici: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

voici mon approche:

Vous pouvez l’utiliser dans d’autres événements.

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