CSS-Selektor mit Element zwischen zwei Klassen

Question

Möchten Sie wissen, welche jQuery Selektor für die Auswahl mit Klasse "BAR" NUR verwenden, wenn es unter einem Button-Element (keine Klasse) ist, die wiederum unter einem div mit der Klasse "foo"

<div class="foo"> 
    <button> 
    <i class="bar">X</i> 
... 

".foo button.bar" funktioniert nicht

EDITED: Vielen Dank für alle Lösungen, die Lösung versucht, aber aus irgendeinem Grund wird die folgende auch ausgewählt:

<div id="mceu_36" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_36" role="button" aria-label="Align left"> 
    <button role="presentation" type="button" tabindex="-1"> 
    <i class="mce-ico mce-i-dashicon dashicons-align-left"></i> 
    </button> 
</div> 
... 
<div id="mceu_40" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_40" role="button" aria-label="Edit "> 
    <button role="presentation" type="button" tabindex="-1"> 
    <i class="mce-ico mce-i-dashicon dashicons-edit"></i> 
    </button> 
</div> 

Mein Inte ntion ist zu behandeln klicken Sie auf <i> mit Dashicons-Edit-Klasse nur, wenn es unter div mit MCE-First ist. Im obigen Beispiel ist "mce-first" auf einem Geschwister div.

Answer 1

Um explizit mit Ihren Anforderungen zu entsprechen:

• Auswahl <i> mit Klasse „bar“
• nur, wenn es unter einem Knopfelement ist (keine Klasse)
• die wiederum unter einem div mit Klasse "foo"

Sie finden diese Wähler wollen

div.foo > button:not([class]) > i.bar 

In der Selektorsyntax gibt ein Leerzeichen jede Ebene unterhalb der DOM-Hierarchie an. Der Operator > zeigt ein direktes Kind an.

Wenn Sie nicht unbedingt Direkt Kind Auswahl möchten, verwenden Sie nur Räume

div.foo button:not([class]) i.bar 

Wenn Sie in den Elementen (außer <button>) nicht besonders interessiert sind und egal, was Klassen kann oder Verwendung auf dem <button>,

für eine <button>

.foo button .bar 

---

Ihre Wähler .foo button.bar war auf der Suche kann nicht einfach sein mit der Klasse bar war das eine Ebene unterhalb eines Elements mit der Klasse foo.

Answer 2

Sie können mithilfe von find prüfen, ob innerhalb von foo so viele Zielelemente vorhanden sind.

$('.foo').find('button .bar'); 

Answer 3

".foo button.bar" nicht

button.bar mittlere Taste Elementklasse bar

die HTML so aussehen

<div class="foo"> 
    <button class="bar"> 
    <i class="bar">X</i> 

Correct hat funktioniert : .foo button .bar