Question

我需要通过jquery动态地将id和路径的混合添加到article元素

这是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()作为获取值的吸气剂：

$(".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>

如何通过jQuery动态将ID和值添加到商品标签？

3 个答案: