Antworten zum Thema „jQuery find element based on its style“

KasselJulian · 11.03.2013

Hi @all,

folgendes versuche ich:
Drei <p>-Tags haben den Hintergrund "blue", eines der <p>-Tags bekommt jedoch direkt im HTML mit style einen grünen background zugewiesen. Mit einem jQuery-Script soll nun dieses <p>-Element mit grünem Hintergrund ausgelesen werden und der Hintergrund zu orange gewechselt werden.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Find Elements based on its style</title>
    <script  type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
    </script>
    <style type="text/css">
    p{
        width:50px;
        height:50px;
        background:blue;    
    }
    </style>
</head>
<body>
    <div>       
        <p style="background:green;"></p>
        <p></p>
        <p></p>
    </div>
    <script type="text/javascript">
         $(document).ready(function(e) {
            if($('div > p').css('background') == "green"){
                $('div > p').css("background", "orange");    
            }
        });
    </script>
</body>
</html>

Leider wird dies nicht gesetzt und auch im Fireburg ist kein Fehler erkennbar.

Could somebody please help me 2 solve the prob?

Duddle · 11.03.2013

AW: jQuery find element based on its style

Du machst hier mehrere Fehler: das background-Attribut vereint alle CSS-Angaben zum Hintergrund. Gibst du dir das im Firebug aus (console.log() usw.), steht dort "green none repeat scroll 0% 0%" drin. Deshalb bringt die einfache Abfrage nach "green" auch nichts. Entweder musst du also backgroundColor abrufen oder innerhalb des Ergebnis-Strings mit JavaScripts indexOf() nach "green" suchen.

Weiterhin weist du der ganzen Kollektion im if-Block den neuen Stil zu. Du willst aber nur ein bestimmtes Element verändern, also musst du das entweder gescheit selektieren (hier wäre eine Klasse besser, alternativ per Index) oder die Kollektion mit .each() durchgehen und darin $(this) ansprechen.

Als letzter Hinweis sei gesagt, dass jQuery mittlerweile bei Version 1.9.1 ist und es kaum einen Grund geben sollte weiterhin mit 1.4.2 zu arbeiten.

Duddle

teste123 · 11.03.2013

AW: jQuery find element based on its style

Duddle schrieb:
Du machst hier mehrere Fehler: das background-Attribut vereint alle CSS-Angaben zum Hintergrund. Gibst du dir das im Firebug aus (console.log() usw.), steht dort "green none repeat scroll 0% 0%" drin. Deshalb bringt die einfache Abfrage nach "green" auch nichts. Entweder musst du also backgroundColor abrufen oder innerhalb des Ergebnis-Strings mit JavaScripts indexOf() nach "green" suchen.

Weiterhin weist du der ganzen Kollektion im if-Block den neuen Stil zu. Du willst aber nur ein bestimmtes Element verändern, also musst du das entweder gescheit selektieren (hier wäre eine Klasse besser, alternativ per Index) oder die Kollektion mit .each() durchgehen und darin $(this) ansprechen.

Als letzter Hinweis sei gesagt, dass jQuery mittlerweile bei Version 1.9.1 ist und es kaum einen Grund geben sollte weiterhin mit 1.4.2 zu arbeiten.

Duddle

Hallo zusammen
ist das das Programm kostenloserr Version?
Danke
MfG

Myhar · 11.03.2013

AW: jQuery find element based on its style

jQuery ist kostenlos, also ist auch Version 1.9 kostenlos. Oder meintest du etwas anderes?

KasselJulian · 11.03.2013

AW: jQuery find element based on its style

Duddle schrieb:
Du machst hier mehrere Fehler: das background-Attribut vereint alle CSS-Angaben zum Hintergrund. Gibst du dir das im Firebug aus (console.log() usw.), steht dort "green none repeat scroll 0% 0%" drin. Deshalb bringt die einfache Abfrage nach "green" auch nichts. Entweder musst du also backgroundColor abrufen oder innerhalb des Ergebnis-Strings mit JavaScripts indexOf() nach "green" suchen.

Weiterhin weist du der ganzen Kollektion im if-Block den neuen Stil zu. Du willst aber nur ein bestimmtes Element verändern, also musst du das entweder gescheit selektieren (hier wäre eine Klasse besser, alternativ per Index) oder die Kollektion mit .each() durchgehen und darin $(this) ansprechen.
Als letzter Hinweis sei gesagt, dass jQuery mittlerweile bei Version 1.9.1 ist und es kaum einen Grund geben sollte weiterhin mit 1.4.2 zu arbeiten.

Duddle

Der Meister hat gesprochen! Danke duddle, wie immer eine Hilfe

Ps: das ich statt Background Background-Color nehmen sollte war mir bewusst, doch machte das aus Grund zwei auch nicht das was ich wollte deswegen nahm ich Background

Ich habe es Gott sei Dank schon vor deinem Post mit each gelöst

Cheers!