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?


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


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")

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


$($(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();

6

Schauen Sie hier - um ein Unterelement eines Elements abzufragen :

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


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


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.