[ERLEDIGT] jQuery: Override padding from element if exists

[tigtman]

Hallo zusammen,

ich möchte folgende CSS-Eigenschaft von einem Element überschreiben, sofern es existiert:

Wenn ein Element mit der Class ".flex-container .right p" ein "padding-left" besitzt, dann überschreibe dieses "padding-left" mit "padding-left: 100px;".

Wie könnte ich das lösen, da nach meinen Wissensstand ein padding nicht via jQuery ausgelesen werden kann.

Besten Dank und einen schönen 3. Advent.

Joe

 

[LeCub]

Klar kann jQuery padding-Werte abfragen: https://jsfiddle.net/Lecub/suubef18/1/. Ich denke der Rest ist nicht allzu schwer.

 

[tigtman]

Vielen Dank. Ich habe es soweit hinbekommen, leider wird das Script nur auf ein Element angewendet. Wie kann ich gleich mehrere Elemente ansprechen?

$('.flex-container .right p').css('padding-left', function() {
    if ($('.flex-container .right p').css('padding-left', '30px')) {
      $(this).css('padding-left', '200px');
    }
});

 

[SpiceLab]

Vielen Dank. Ich habe es soweit hinbekommen, leider wird das Script nur auf ein Element angewendet. Wie kann ich gleich mehrere Elemente ansprechen?

Es steht Dir doch frei, den jQuery-Selektor entsprechend zu erweitern?

$('.flex-container .left p, .flex-container .right p')

Oder alternativ CSS-Klasse(n) hinzufügen und wieder entfernen:

• https://api.jquery.com/addclass
  
• https://api.jquery.com/removeclass

 

[tigtman]

Es funktioniert doch nicht wie gewünscht, da jetzt immer das letzte Element das padding-left von 200px erhält.

 

[SpiceLab]

Es funktioniert doch nicht wie gewünscht, da jetzt immer das letzte Element das padding-left von 200px erhält.

Und Du kennst nicht den Grund dafür?

$(this)

Um den "Selektoren-String" die nächsten Zeilen nicht komplett durchs Script mitschleifen zu müssen, legen wir ihn zu Beginn in der Variablen $mySelector ab:

var $mySelector = $('.flex-container .left p, .flex-container .right p');
$mySelector.css('padding-left', function() {
    if ($mySelector.css('padding-left', '80px')) {
      $mySelector.css('padding-left', '200px');
    }
});

Fiddle-Demo: https://jsfiddle.net/SpiceLab/n8rer6u8/

 

[tigtman]

Nein, es gibt mehrere DIVs mit der Class ".flex-container .right p". Mit Deinem Script erhält nun jeder container mit dieser Class das padding-left. Es sollen aber nur die Container ein padding-left von 200 px erhalten, welche bereits ein padding-left haben.

 

[Tronjer]

Stecke das padding-left in eine extra Klasse und frage dann mit hasClass() ab.

 

[SpiceLab]

Nein, es gibt mehrere DIVs mit der Class ".flex-container .right p".

Weiß ich doch nicht

Mit Deinem Script erhält nun jeder container mit dieser Class das padding-left. Es sollen aber nur die Container ein padding-left von 200 px erhalten, welche bereits ein padding-left haben.

"Mein" Script basiert auf "Deinem" Script in Post #3, und ging lediglich auf Deine Rückmeldung ein

Es funktioniert doch nicht wie gewünscht, da jetzt immer das letzte Element das padding-left von 200px erhält.

damit nicht ausschließlich das letzte Element (JS = Objekt) im DOM manipuliert wird.

So funktioniert es:

            $('.flex-container .right p').each(function () {
                if ($(this).css("padding-left") == "30px") $(this).css("padding-left", "100px");
            })

Und als Zugabe meine gestrige Fassung mit der Variablen $mySelector:

var $mySelector = $('.flex-container .left p, .flex-container .right p');
$mySelector.each(function() {
  if ($(this).css('padding-left') == '30px') $(this).css('padding-left', '200px');
})

Fiddle-Demo: https://jsfiddle.net/SpiceLab/3eyjrv81/ (HTML besitzt nun zwei .flex-container mit .left p / .right p)

 

[tigtman]

@Sempervivum Perfekt, so funktioniert es. Vielen Dank!

@Spicelab Ich habe die Variable mit hinzugefügt. Vielen Dank!

 

[SpiceLab]

@Spicelab Ich habe die Variable mit hinzugefügt. Vielen Dank!

Gern geschehen :)

Vielleicht kannst Du so eine Variable in einem anderen Script nutzen, worin der Selektor tatsächlich mehrfach vorkommt