Wie zu steuern (vermeiden) Styling von verschachtelten HTML-Elementen bei der Verwendung von jQuery, wenn Klassen keine Option sind?

Question

Ich arbeite an der Implementierung einer dynamischen Gestaltungsfunktionalität in einem Wordpress-Design mithilfe von jQuery. Ich bin herausgefordert von der Tatsache, dass jQuery Inline-Stile verwendet, was dazu führen kann, dass verschachtelte Elemente von einem Selektor angesprochen werden, obwohl dieser Selektor in den CSS-Regeln keine Auswirkungen hat. Um zu veranschaulichen, was ich meine, sehen Sie sich bitte diese JSFiddle.

HTML:

<p> 
    This is normal text 
    <br> 
    <br> 
    <em>This is italic text</em> 
    <br> 
    <br> 
    <strong>This is bold text</strong> 
    <br> 
    <br> 
    <strong><em>This is bold italic text</em></strong> 
    <br> 
    <br> 
    <em><strong>This is also bold italic text</strong></em> 
    <br> 
    <br> 
</p> 

<button> 
    Style it! 
</button> 

CSS:

p em strong, 
p strong em { 
     color: red; 
    } 

p strong { 
    color: blue; 
} 

jQuery:

(function($) { 
    $('button').on('click', function() { 
    $('p strong').css('color', 'turquoise'); 
    }); 
})(jQuery); 

Wie dargestellt, CSS Styling der fett gedruckten Text ist nur dann wirksam auf den fettgedruckten Text, wie erwartet, aber mit jQuery - mit dem gleichen Selektor ist die Instanz des fett gedruckten Kursivtexts, der das Tag als verschachteltes Tag hat, ebenfalls ein infiziert.

Ist es möglich, eine jQuery-Auswahl vorzunehmen, die die verschachtelten Elemente nicht enthält, wie im Beispiel? Natürlich, wenn ich Klassen verwenden könnte, wäre die Lösung einfach, aber ich kann in diesem Fall nicht.

Wenn ich die! Wichtige Option zu den ursprünglich rot gestylten Elementen hinzufüge, bekomme ich, was ich will, aber ich möchte das wirklich vermeiden, wenn überhaupt möglich. Vielen Dank.

Answer 1

Wenn Sie einen bestimmten Fall zu lösen, dann können Sie die jQuery .not() Methode nutzen Auswahlen von einem ausgewählten auszuschließen. Für diesen Fall:

$('p strong').not('p em strong').css('color', 'turquoise'); 

Dies löst nicht das gesamte Problem, dass jQuery .css() Methode das style Attribut des Elements bearbeitet, die eine Größenordnung von Spezifität zu einem Stil hinzufügt, wenn der Browser, welcher Stil bestimmt anwenden .

Eine Alternative wäre, eine JavaScript-Funktion zu erstellen, die dem DOM einen neuen CSS-Stil hinzufügt. Eine Beispielfunktion könnte wie folgt aussehen:

var createCSSStyle = (function() { 
    var styleSheet = null; 
    return function(selector, cssOptions) { 
     if (styleSheet == null) { 
      styleSheet = document.createElement('style'); 
      styleSheet.type = 'text/css'; 
      document.getElementsByTagName('head')[0].appendChild(styleSheet); 
     } 

     var text = " " + selector + " {"; 
     for(var prop in cssOptions) 
      text += prop + ":" + cssOptions[prop] + ";"; 
     text += "}"; 

     styleSheet.innerHTML += text; 
    }; 
})(); 

Und es zu verwenden:

createCSSStyle('p strong', { 'color' : 'turquoise' }); 

Hier ein update of your Fiddle mit ihm in Aktion ist.

Hinweis: Ich habe hier eine Selbstausführungsfunktion verwendet, um das Stylesheet in einer lokalen Variablen speichern zu können. Ich wollte bei jedem Aufruf der Methode kein neues Stylesheet erstellen. Nur das erste Mal.

Answer 2

Sofern ich das Problem nicht missverstanden habe, können Sie einen direkten Kinderselektor verwenden.

$('p > strong').css('color', 'turquoise'); 

Answer 3

Versucht dieser Selektor :nth-child.?
Hier ist ein Beispiel
https://jsfiddle.net/3pc98j7u/1/

Answer 4

Dies wird ein Stil-Tag an den Kopf hängen und dann die Stile hinein schreiben. Dann haben Sie keine Inline-Stile.

(function($) { 
    var styles = []; 
    function styler(style){ 
     styles.push(style); 
     $("#styler").html(styles.join("\n")); 
    } 
    $('button').on('click', function() { 
     styler("p strong {color: turquoise;}") 
    }); 

    $("head").append("<style id='styler'></style>") 
})(jQuery);