2017-10-04 12 views
0

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:

  1. es auf den style und title Attribute scheitern würde, weil sie Räume haben.
  2. Es möglicherweise scheitern auf die Attribute ohne Wert.
+0

'attributesStr.match (/ [^ \ s =] + (= [ '] [^] * ['])/g)' dies wird Ihnen die erste Split bekommen – tallberg

+3

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? –

+0

@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 :) –

Antwort

4

die attributesStr nehmen und es in die bestehende outerHTML einfügen. Um dies zu erreichen, müssen Sie den Knoten rekonstruieren, indem Sie das vorhandene Tag entfernen, die Zeichenfolge einfügen und den Rest des HTML-Codes zurückstellen.

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. 
 

 
var element = document.getElementById('htmlElement'); 
 

 
var tag = element.tagName; 
 

 
element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

+0

Wow! Das funktioniert wirklich, aber wenn Sie das Element überprüfen, werden Sie feststellen, dass es ein neues Element innerhalb des alten '# htmlElement' hinzufügt. Versuchen Sie, mit "outerHtml" herumzualbern, um das zu beheben. –

+1

ja, dumme jQuery's 'html()'. könnte es auch gar nicht benutzen –

0

Warum die Zeichenfolge nicht Trennung mit ''

var attributesStr = ""; 
 
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes. 
 
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces. 
 
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties. 
 
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value. 
 

 
var array = attributesStr.split(','); 
 

 
array.forEach(function(item){ 
 
property = item.split('='); 
 
$('#htmlElement').attr(property[0].trim()); 
 
if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim()); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

+0

Ich muss eine Zeichenfolge mit allen Attributen verwenden, ich kann das Quellformat dieser Zeichenfolge absolut nicht ändern. Ich habe diese 'attributesStr'-Variable als Beispiel für die Art der Zeichenkette eingefügt. –

0

Dies wird Ihnen die erste Split bekommen

attributesStr.match(/[^\s=]+(=['][^']*['])?/g) 

Ergebnis:

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"] 

Dann in einem foreach können Sie die attrs wie vorgeschlagen behandeln.

+0

Ok, das sieht so aus, als könnte es funktionieren. Könntest du den Rest des Codes mit den Betreuern umgehen? Dann würde es unbestreitbar funktionieren. –

1

Sie können .attr() dazu in jquery verwenden. Hier ist das Arbeits-Snippet.

click here for attr() usage

$(document).ready(function(){ 
 
$("#htmlElement").attr("class", "regularClass"); 
 
$("#htmlElement").attr("title", "Title... with spaces!"); 
 
$("#htmlElement").attr("style", "color: red; font-weight: bold"); 
 
$("#htmlElement").attr("data-attributenovalue",true); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

+0

Ich muss eine Zeichenfolge mit allen Attributen verwenden, ich kann das Quellformat dieser Zeichenfolge absolut nicht ändern. Ich habe diese 'attributesStr'-Variable als Beispiel für die Art der Zeichenkette eingefügt. –

+0

Sie möchten die Zeichenfolge mit allen Attributen verwenden, anstatt sie separat mit attr rechts hinzuzufügen? –

+0

Ja, das ist richtig @rahulpatel –

1

Try this:

var dummHTML = $("<div "+attributesStr+"></div>"); 
$.each(dummHTML[0].attributes, function(i,v){ 
$('#htmlElement').attr(v.nodeName,v.nodeValue); 
}); 
1

Vielleicht nicht die beste Option, aber wenn seine erforderlich, um die vollständige Zeichenfolge zu verwenden:

Die Idee ist: Nehmen Sie den Inhalt der das Element, dann entfernen Sie es und erstellen Sie es erneut mit den neuen Attributen:

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. 
 
var $innerHTML = $("#htmlElement").html() 
 
$("#htmlElement").remove() 
 
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 
 

 
$("body").after($newElement)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Verwandte Themen