jQuery - Auswahl von Elementen aus einem Element heraus

93

Nehmen wir an, ich habe ein solches Markup:

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

und ich möchte #moo auswählen.

warum $('#foo').find('span')funktioniert, aber $('span', $('#foo'));nicht?

jquery jquery-selectors parent-child Alex
quelle
10
Warum nicht $('#moo')? ;) Übrigens. es funktioniert: jsfiddle.net/fkling/k5X2r
Felix Kling
Ich weiß nicht warum, aber die Funktion, die ich mit dem ausgewählten Bereich verknüpfe, wird auf alle Bereiche auf der Seite angewendet, nicht nur auf den in #foo :(
Alex
2
Was ist, wenn Sie das Element bereits in einer var ele = $("div #foo")
Variablen ausgewählt haben?

Antworten:

129

Sie können jede dieser verwenden [ab der schnellsten]

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

Schau mal

Jishnu AP
quelle
1
Ich denke, der dritte sollte span # moo nicht span # foo sein?
xr280xr
59

Eigentlich $ ('# id', this); würde #id auf jeder Nachkommenebene auswählen, nicht nur das unmittelbare Kind. Versuchen Sie stattdessen Folgendes:

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

oder

$("#foo > #moo")

oder

$("#foo > span")
Pranay Rana
quelle
Dadurch wird nichts ausgewählt, da das Element die ID moo und nicht die Klasse hat.
Felix Kling
3
Es ist erwähnenswert, dass .children()und .find()ähnlich sind, außer dass der erstere nur eine Ebene den DOM-Unterbaum hinunter fährt.
Kevin
9

Warum nicht einfach verwenden:

$("#foo span")

oder

$("#foo > span")

$('span', $('#foo')); funktioniert gut auf meiner Maschine;)

Jäger
quelle
$($(elementA), 'tr#' + key + ' span')arbeitet nicht für mich (jQuery 1.10.2)
Cody
7

Mit der findOption können Sie ein Element in einem anderen auswählen. Um beispielsweise ein Element mit der ID txtName in einem bestimmten div zu finden, können Sie like verwenden

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

Schauen Sie hier - um ein Unterelement eines Elements abzufragen :

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

Cody
quelle
3

.... aber $ ('span', $ ('# foo')); funktioniert nicht?

Diese Methode wird als Bereitstellung genannt Selektor Kontext .

Hier geben Sie ein zweites Argument für den jQuery-Selektor an . Es kann sich um eine beliebige CSS-Objektzeichenfolge handeln, wie Sie sie für die direkte Auswahl oder ein jQuery-Element übergeben würden.

z.B.

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

In der obigen Zeile werden alle Bereiche innerhalb des Containers mit der benannten Klasse ausgewählt cont1.

DEMO

Mohd Abdul Mujib
quelle