Probleme mit JQuery-Selektoren und "ist"

Ich habe Schwierigkeiten zu verstehen, warum ein bestimmter Selektor für mich nicht funktioniert. Zugegeben, ich bin ein bisschen ein JQuery-Neuling.Probleme mit JQuery-Selektoren und "ist"

Dies wählt die richtigen ersten div.editbox auf der Seite und Farben es gelb:

$('div.editbox:first').css("background-color","yellow");

Doch dieses if ... is Konstrukt macht die markierte Grenze für jede Box erscheinen, wie es moused-over ist .

$('div.editbox').bind('mouseover', function(e) { 
    if ($(this).is('div.editbox:first')) {$(this).css("border", "1px solid red");} 
});

I Variationen versucht haben, wie ‚.editbox: zuerst‘, ‚.editbox div: erste‘ usw.

Grunde möchte ich in der Lage sein, zuverlässig zu prüfen, ob dies der erste ist oder letztes Element von mit dem Klassennamen.

Danke!

Edit: hier ist der HTML Ich verwende:

<body> 
<div class="container"> 
<p></p> 
<div class="editbox" id="box1">Foo</div> 
<div class="editbox" id="box2">Bar</div> 
<div class="editbox" id="box3">Baz</div> 
<div class="responsebox" id="rbox"></div> 
</div> 
</body>

Dies ist nur ein Proof-of-Concept-Seite; Die eigentliche Seite wird natürlich sehr viel komplexer sein. Nochmal: Was ich will, ist zuverlässig zu erkennen, ob ich in der ersten oder letzten "div.editbox" bin. I Eine Abhilfe verwendet wird:

$('div.editbox:last').addClass("lasteditbox");

Dann für if ($(this).is(".lasteditbox")) testen, die funktionieren, aber es scheint ungeschickt und ich versuche, die richtige Art und Weise zu lernen, dies mit JQuery zu tun.

Quelle

2009-05-20 SylvanK

so wollen Sie das Ereignis Mouseover nur auf den ersten binded? – TStamper

UPDATE: Dies funktioniert für den ersten Element.

$('div.editbox').bind('mouseover', function(e) { 
if ($("div.editBox").index(this) == 0) { 
     $(this).css("border", "1px solid red"); 
    } 
});

Und für das letzte Element, dieser Selektor funktioniert:

if($("div.editBox").index(this) == ($("div.editBox").length-1)){ 
    $(this).css("color","red"); 
}

Quelle

2009-05-20 16:19:19

Danke, aber das nimmt es nur, wenn es das erste Kind des Elterncontainers ist; nicht das erste Element mit dem Klassennamen. – SylvanK

Bitte versuchen Sie mein Update –

Sorry, hebt es überhaupt nicht auf. Ich füge den HTML-Code hinzu, den ich oben verwende. – SylvanK

Wenn Sie die Mouseover wollen nur das erste Vorkommen der Klasse editbox innerhalb div

$('div.editbox:first').mouseover(function() { 
    $(this).css("border", "1px solid red"); 
});

bearbeiten

$('div.editbox').mouseover(function() { 
    $(this).css("border", "1px solid yellow"); 
}).filter(':first').mouseover(function(){ 
    $(this).css("border", "1px solid red"); 
}).filter(':last').mouseover(function(){ 
    $(this).css("border", "1px solid blue"); 
})

Quelle

2009-05-20 16:13:52 TStamper

Danke TStamper; Das CSS ist nur ein Beispiel. Ich habe eine Funktion, die auf allen Elementen ausgeführt wird, aber ich möchte, dass sie sich beim ersten und letzten Element unterschiedlich verhält, also muss ich erkennen können, wenn die Funktion in diesen Elementen ausgeführt wird. – SylvanK

aktualisiert, um für alle zu vergleichen – TStamper

Es tut mir sehr leid TStamper; Ich schätze den Ansatz, den Sie verfolgen, aber ich füge jedem Element einen moderat komplexen Event-Handler bei. Ihr Ansatz würde bedeuten, dass ich 3 verschiedene Versionen dieser Funktion haben muss; oder nehmen Sie alternativ ein Argument zu der Funktion, wenn sie gebunden ist, ob dies das erste, das letzte oder ein mittleres Element ist. Ich nehme an, dass dieser Ansatz funktionieren könnte, aber ich versuche wieder, die "richtige" JQuery-Methode zu finden. Ist das was ich mit $ (this) .is (". Class: first") wirklich nicht machbar? – SylvanK

haben u versucht

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}

Quelle

2009-05-20 16:16:19 ssmithstone

angewendet wird, die jede Box wieder fängt. – SylvanK

$('div.editbox').mouseover(function() { 
     //change the css for all the elements 
     $(this).css("background-color", "yellow"); 
    }) 
    .filter(':first,:last').mouseover(function(){ 
     //execlude the first and the last 
     $(this).css("background-color", "Blue"); 
    })

Quelle

2009-05-20 16:38:36

Probleme mit JQuery-Selektoren und "ist"

Antwort

Verwandte Themen