ich eine Reihe von Attributen in gültige HTML geschrieben, und ich möchte diese Attribute auf einem tatsächlichen html Element setzen (kein HTML String eines Elements).hinzufügen Attribute eine Reihe von html zu einem HTML-Element
Zum Beispiel habe ich die Zeichenfolge von Attributen in der sinnigerweise attributesStr
Variable, und ich möchte diese Attribute hinzufügen, um die #htmlElement
div.
var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.
// Your special code to add the attributes to `#htmlElement` goes here.
<div id="htmlElement">
The HTML element!
</div>
Nach dem JQuery/JavaScript-Code ausgeführt wird, #htmlElement
sollte wie folgt aussehen:
<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue>
The HTML element!
</div>
Wie kann ich das in JavaScript oder JQuery tun?
Erster Versuch: Ich dachte, dass ich diese attributesStr
auf Räume ing von .split()
tun konnte, und dann jedes einzelne Attribut Schlüsselwertpaar Aufspaltung auf der =
und Iterieren dann das Array und das Hinzufügen jedes Paar Schlüsselwert mit jQuerys .prop()
oder .attr()
, aber dies aus zwei Gründen nicht funktionieren würde:
- es auf den
style
undtitle
Attribute scheitern würde, weil sie Räume haben. - Es möglicherweise scheitern auf die Attribute ohne Wert.
'attributesStr.match (/ [^ \ s =] + (= [ '] [^] * ['])/g)' dies wird Ihnen die erste Split bekommen – tallberg
Sie machen das schwieriger, als es sein muss, indem Sie die vorgefertigte Saite hacken. Können Sie die Stile nicht an dem Punkt anwenden, an dem Sie diese Zeichenfolge erstellen? Oder erstellen Sie sogar ein Objekt mit diesen Werten, die später angewendet werden sollen? –
@RoryMcCrossan Ich habe bereits eine andere Lösung zu meinem ursprünglichen Problem gefunden, ich war nur neugierig, ob es eine Möglichkeit gab, dies in JS/JQuery zu tun :) –