Necesito agregar una combinación de identificadores y ruta al elemento del artículo dinámicamente a través de jquery

Esta es la etiqueta del artículo HTML

<article class=test> <article/>

Traté de hacer esto en jquery.

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

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

Pero esto agrega la identificación completa y los elementos en un formato de cadena, algo así como comillas, convirtiéndolo en una cadena, mientras que son identificaciones en el área de texto de la etiqueta del artículo en lugar de dentro de la etiqueta del artículo

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

Espero que la salida esté en este formato

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

¿Cómo lograrlo?

3
acus 25 sep. 2019 a las 15:45

3 respuestas

La mejor respuesta

append() se usa para agregar contenido dentro de un elemento. Para modificar los atributos del elemento, puede usar attr():

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

Alternativamente, puede usar una combinación de prop() y data(). El último de los cuales coloca los valores en la caché de jQuery, no en el DOM, lo que brinda un mejor rendimiento, pero requiere que también use data() como un captador para recuperar los valores:

$(".test").prop('id', '/dam/pic.jpg').data({
  'asset-share-id': 'asset',
  'asset-share-asset': '/dam/pic.jpg'
});
2
Rory McCrossan 25 sep. 2019 a las 12:50

Reconozco que la pregunta pide una solución usando la biblioteca jQuery pero, en aras de la exhaustividad, aquí, adicionalmente, es una solución que usa JavaScript de vainilla.

Ejemplo de trabajo:

// 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>
1
Rounin 25 sep. 2019 a las 13:14

Puede usar la siguiente lógica usando los métodos split() y 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/>
1
Bhushan Kawadkar 25 sep. 2019 a las 12:53