如何通过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>

如何实现这一点？

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'
});

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/>

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>