jQuery - sélection d'éléments à l'intérieur d'un élément

94

disons que j'ai un balisage comme celui-ci:

<div id="foo">
  ...
  <span id="moo">
    ...
  </span>
  ...
</div>

et je veux sélectionner #moo.

pourquoi $('#foo').find('span')fonctionne, mais $('span', $('#foo'));pas?

jquery jquery-selectors parent-child Alex
la source
10
Pourquoi pas $('#moo')? ;) Btw. ça marche: jsfiddle.net/fkling/k5X2r
Felix Kling
Je ne sais pas pourquoi mais la fonction que j'accroche à la plage sélectionnée est appliquée à toutes les plages de la page, pas seulement à celle à l'intérieur de #foo :(
Alex
2
Qu'en est-il lorsque vous avez déjà l'élément sélectionné dans une var, alors par exemple, vous commencez par var ele = $("div #foo")comment pouvez-vous arriver à moo à partir d'ici (sans utiliser de références de tableau)
Worthy7

Réponses:

129

Vous pouvez utiliser n'importe lequel de ces [en commençant par le plus rapide]

$("#moo") > $("#foo #moo") > $("div#foo span#moo") > $("#foo span") > $("#foo > #moo")

Regarde

Jishnu AP
la source
1
Je pense que le troisième devrait être span # moo not span # foo?
xr280xr
60

En fait, $ ('# id', this); sélectionnerait #id à n'importe quel niveau descendant, pas seulement l'enfant immédiat. Essayez plutôt ceci:

$(this).children('#id');

ou

$("#foo > #moo")

ou

$("#foo > span")
Pranay Rana
la source
Cela ne sélectionnera rien car l'élément a l' ID moo , pas la classe.
Felix Kling
3
Il est intéressant de noter que .children()et .find()sont similaires sauf que le premier ne parcourt qu'un seul niveau dans le sous-arbre DOM.
Kevin
Cela fonctionne bien, merci ;-)
Ali Lashini
9

Pourquoi ne pas simplement utiliser:

$("#foo span")

ou

$("#foo > span")

$('span', $('#foo')); fonctionne bien sur ma machine;)

chasseur
la source
$($(elementA), 'tr#' + key + ' span')ne fonctionne pas pour moi (jQuery 1.10.2)
Cody
8

Vous pouvez utiliser l' findoption pour sélectionner un élément dans un autre. Par exemple, pour trouver un élément avec l'id txtName dans un div particulier, vous pouvez utiliser comme

var name = $('#div1').find('#txtName').val();
Sai Kalyan Kumar Akshinthala
la source
6

Regardez ici - pour interroger un sous-élément d'un élément :

$(document.getElementById('parentid')).find('div#' + divID + ' span.child');

Cody
la source
3

.... mais $ ('span', $ ('# foo')); ne fonctionne pas?

Cette méthode est appelée comme fournissant un contexte de sélecteur .

En cela, vous fournissez un deuxième argument au sélecteur jQuery . Il peut s'agir de n'importe quelle chaîne d'objet css, comme vous le feriez pour la sélection directe ou d'un élément jQuery.

par exemple.

$("span",".cont1").css("background", '#F00');

La ligne ci-dessus sélectionnera toutes les étendues dans le conteneur ayant la classe nommée cont1.

DEMO

Mohd Abdul Mujib
la source