• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] jQuery: Override padding from element if exists

tigtman

Mitglied
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
 
Werbung:
Vielen Dank. Ich habe es soweit hinbekommen, leider wird das Script nur auf ein Element angewendet. Wie kann ich gleich mehrere Elemente ansprechen?

Code:
$('.flex-container .right p').css('padding-left', function() {
    if ($('.flex-container .right p').css('padding-left', '30px')) {
      $(this).css('padding-left', '200px');
    }
});
 
Werbung:
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?
Code:
$(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:
Code:
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/
 
Werbung:
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.
 
Nein, es gibt mehrere DIVs mit der Class ".flex-container .right p".
Weiß ich doch nicht :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.
"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:
Code:
            $('.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:
Code:
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)
 
Werbung:
Zurück
Oben