將屬性作爲字符串添加到jQuery中的DOM元素

所以我有一個存儲爲字符串變量的屬性列表。我想將該變量添加到<div>。我目前處於虧損狀態。我有如下：將屬性作爲字符串添加到jQuery中的DOM元素

HTML：

<div></div>

JS：

var attributes = 'data-id="123" data-type="content" data-order="1"'

所需的輸出：

<div data-id="123" data-type="content" data-order="1"></div>

來源

2017-02-15 DigitalMC

由於您的屬性是以字符串形式存儲的，因此您需要首先提取數據屬性及其值，然後將其循環，然後將它們添加到div，您可以使用jQuery的'.data（）'方法執行此操作。 – WillardSolutions

var attributes = 'data-id="123" data-type="content" data-order="1"'; 
attributes=attributes.split(" "); 
i=0; 
var d=document.getElementsByTagName('div')[0]; 
while (i<attributes.length){ 
d.setAttribute(attributes[i].split('=')[0],attributes[i].split('=')[1].replace(/\"/g,"")); 
i++; 
} 

alert(d.getAttribute("data-id"));

來源

2017-02-15 17:43:32

這應該工作。

var div = document.getElementById('YOUR_ID'); 
var attributes = 'data-id="123" data-type="content" data-order="1"' 
attributes.split(' ').forEach((attr) => { 
    div.setAttribute(attr.split('=')[0], attr.split('=')[1]); 
});

來源

2017-02-15 17:39:25 inoabrian

儘管您需要擺脫數據值中的雙引號。 – NotABlueWhale

如果屬性值中有空格，則會中斷。 –

這也適用於我的使用，感謝您的貢獻。其他人只是更防彈一點。 – DigitalMC

您可以使用split()拆就鍵值的屬性，然後使用forEach()循環將它們添加到元素。

var attributes = 'data-id="123" data-type="content" data-order="1"'.replace(/"/g, '').split(/=| /) 
 
attributes.forEach(function(e, i) { 
 
    if(i % 2 == 0) $('div').attr(attributes[i], attributes[i + 1]) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>DIv</div>

來源

2017-02-15 17:42:02

這個解決方案中的'if（i％2 == 0）'有什麼意義？ – DigitalMC

每個偶數都會做一些事情。 –

對，但爲什麼只有偶數？ – DigitalMC

用空格分割字符串attributes（而不是空格引號內）

var div = document.getElementById('test'); 
 
var attributes = 'data-id="123" data-type="content new" data-order="1"'; 
 
var arr = attributes.match(/[^\s="']+|"([^"]*)"|'([^']*)'/g); 
 

 
for (var i = 0; i < arr.length; i += 2) 
 
    div.setAttribute(arr[i], arr[i + 1].replace(/"/g, ''));

<div id="test">test</div>

來源

2017-02-15 18:03:55 Jag

將屬性作爲字符串添加到jQuery中的DOM元素

回答

相關問題