Element durch Text und Attribut auswählen

Question

Einfache Frage: Warum funktioniert das nicht?

if ($('a:contains("some text"):first').attr("class") == "someclass") { 
    this.css('background-color', 'red'); 
} 

Answer 1

this soll das <ein> Element beziehen, die in der ersten Zeile gefunden wird.

Leider funktioniert das Scoping des this Schlüsselwortes nicht. In diesem Fall bezieht sich this auf den enthaltenden Bereich, in dem dieser Code platziert wird. Um das zu tun, was Sie benötigen, müssen Sie direkt auf das Element a verweisen. Versuchen Sie folgendes:

var $a = $('a:contains("some text"):first'); 
if ($a.attr("class") == "someclass") { 
    $a.css('background-color', 'red'); 
} 

Beachten Sie auch, dass, wenn das a ausgewählte Element mehrere Klassen hat die oben fehlschlagen. Um dies zu beheben, dass Sie hasClass() Methode jQuery verwenden können:

var $a = $('a:contains("some text"):first'); 
if ($a.hasClass("someclass")) { 
    $a.css('background-color', 'red'); 
} 

Oder, noch besser, können Sie das Element auswählen, um direkt von der Klasse Sie suchen, ohne die Notwendigkeit der if Aussage.

$('a.someclass:contains("some text"):first').css('background-color', 'red'); 

Schließlich ist zu beachten, dass es besser ist es Ihre Stilregeln in einem separaten Stylesheet zu definieren und dann addClass() verwenden, um diese Klassen hinzufügen, wo in JS erforderlich, anstatt sie das Hinzufügen Ad-hoc-.css() verwenden.