如何通过jQuery动态地向文章标签添加ID和值？

Question

我需要通过jquery动态地向文章元素添加一组id和路径。

这是HTML的文章标签。

<article class=test> <article/>

我尝试在jquery中实现这个功能。

var assetHtml='data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg"';

$( ".test" ).append(assetHtml);

但是这会将整个id和元素以字符串格式添加到引号中，使其成为字符串，而它们是文章标签文本区域中的id，而不是在文章标签内部。

<article class="test">"data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg""</article> 

我希望输出的格式是这样的

<article class=test data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg" > </article>

如何实现这个目标？

- acus

---

$(selector).attr("attribute","value"); - Ravi Chauhan

Answer 1

append() 用于在元素内添加内容。要修改元素的属性，可以使用 attr():

$(".test").attr({
  'data-asset-share-id': 'asset',
  'data-asset-share-asset': '/dam/pic.jpg',
  'id': '/dam/pic.jpg'
});

或者你可以使用prop()和data()的组合。后者将值放入jQuery的缓存中，而不是DOM，这样可以获得更好的性能，但需要使用data()作为getter来检索值：

$(".test").prop('id', '/dam/pic.jpg').data({
  'asset-share-id': 'asset',
  'asset-share-asset': '/dam/pic.jpg'
});

- Rory McCrossan

---

我可以添加多个具有相同id名称的id吗？例如： - acus

一个元素上只能有一个 id 属性，并且该值必须在 DOM 中是唯一的。 - Rory McCrossan

我能否通过jquery多次添加相同的文章标签，但使用不同的资源路径？<article class=test data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg" > </article> - acus

是的，但是每个元素的 id 都需要更改。 - Rory McCrossan

Answer 2

你可以使用 split() 和 attr() 方法来实现以下逻辑。

$(function(){
var assetHtml='data-asset-share-id="asset" data-asset-share-asset="/dam/pic.jpg" id="/dam/pic.jpg"';
var assetAttr = assetHtml.split(' ');
for(var i=0; i<assetAttr.length; i++) {
   var attr = assetAttr[i].split('=');
   $( ".test" ).attr(attr[0], attr[1]);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class=test> Article<article/>

- Bhushan Kawadkar

---

我认为你过于复杂化了，因为你假设原始尝试中的字符串无法修改。 - Rory McCrossan

Answer 3

我知道这个问题要求使用 jQuery 库解决，但为了完整起见，这里还提供了一个使用原生 JavaScript 的解决方案。

可行示例：

// GET THE ARTICLE ELEMENT
const testArticle = document.getElementsByClassName('test')[0];

// CREATE OBJECT CONTAINING ATTRIBUTES AND VALUES
const assetHtml = {

  'data-asset-share-id' : 'asset',
  'data-asset-share-asset' : '/dam/pic.jpg',
  'id' : '/dam/pic.jpg'
}

// GET THE ATTRIBUTES (ie. THE KEYS OF THE OBJECT ABOVE)
const assetHtmlAttributes = Object.keys(assetHtml);

// ASSIGN ATTRIBUTES AND VALUES TO THE ELEMENT
assetHtmlAttributes.forEach((attribute) => testArticle.setAttribute(attribute, assetHtml[attribute]));

// VIEW UPDATED ELEMENT
console.log(testArticle);

<article class="test"></article>

- Rounin