0

¡Hola!

Intenté reemplazar un valor del atributo id mediante javascript, pero como verán a continuación, solo afecta a uno de los atributos y no así a todos los que tienen el mismo valor de id.

document.getElementById("featured-20:50").setAttribute("id", "book-offert");
.bookx {
    border: 1px solid #dedede;
    margin: 0 0 10px;
    padding: 10px;
}
#book-offert {
    border: 1px solid #ff16c2;
    margin: 0 0 10px;
    padding: 10px;
}
<article class="bookx" id="featured-20:50">
    <h2>Libro 1</h2>
    Descripción del libro o revista del cual se habla
</article>

<article class="bookx" id="featured-10:00">
    <h2>Libro 2</h2>
    Descripción del libro o revista del cual se habla
</article>

<article class="bookx" id="featured-20:50">
    <h2>Libro 3</h2>
    Descripción del libro o revista del cual se habla
</article>

<article class="bookx" id="featured-10:00">
    <h2>Libro 4</h2>
    Descripción del libro o revista del cual se habla
</article>

Como se pudo observar, solo "Libro 1" cambió el valor, pasó (cambió) de id="featured-20:50" a id="book-offert" y por tanto entró en acción el css destinado. Pero no cambió "Libro 3" que tiene el mismo id inicial "featured-20:50".

¿Cómo podría lograr que todos los valores (con un mismo nombre) puedan reemplazar el id con javascript o jquery?

Es decir, que tanto "Libro 1" y "Libro 3", que tienen id="featured-20:50", pasen a id="book-offert" y no solamente cambie uno.

Anticipo mis agradecimientos por la ayuda.

3
  • No puedes tener más de un elemento con el mismo id debes utilizar clases en su lugar si lo que quieres es manejar varios elementos con el mismo nombre.
    – allexiusw
    el 30 may. 2020 a las 6:14
  • Toda la razón, es elemental saber (como apunta @Darwin97VA) que no podemos tener varias id con un mismo valor. Lamentablemente, lo que busco es resolverlo de esa manera, ya que en un resumen de items se genera la estructura html que planté. @Darwin97VA, resolvió el asunto con una propuesta.
    – Carola
    el 30 may. 2020 a las 12:25
  • Puedes saltarte los estandares pero bueno algún día aprenderas de mala manera lo importante que es ajustarse a ellos. Suerte.
    – allexiusw
    el 30 may. 2020 a las 21:55

1 respuesta 1

3

Respuesta rápida: Usa querySelectorAll("#id") en vez de getElementById("id").

Uso:

const articles = [...document.querySelectorAll("#featured-20:50")];
articles.forEach(article => article.setAttribute("id", "book-offert"));

Consideraciones:

  1. Es muy mala práctica tener más de un elemento con el mismo "id". Para esos casos es mejor usar "clases" o "data-id".
  2. Lo que buscas es tratar una lista de elementos con una sóla función así que para ese caso lo óptimo sería tratar un array de ello.
  3. El método querySelectorAll devuelve una lista de nodos (elementos) "estáticos", getElementsByClassName, getElementById, getElementsByTagName y similares devuelven nodos "vivos". Es decir que si algun nodo se elimina en el futuro los valores de querySelectorAll y querySelector no cambiarán, pero sí de los otros.
  4. Los métodos anteriores que devuelven listas no son "arrays" en sí, pero sí son iterables. Podrías usar una sentencia "for" para ello. En el caso del ejemplo que escribí al inicio usé la lista devuelta por dicho método y lo deestructuré en un array por lo que ya puedo usar el método "forEach".
  5. Si usas $("#id") con Jquery también sólo te devolverá un item.
  6. Recuerda que "id" es un atributo así que también podrías usar algo como esto:

Sólo javascript:

const articles = [...document.querySelectorAll('[id="featured-20:50"]')];
articles.forEach(article => article.setAttribute("id", "book-offert"));

Con Jquery:

$(document).ready(()=>{
   const articles = $('[id="featured-20:50"]');
   $.each(articles, (indice, article) => $(article).attr('id', "book-offert"));
});

Saludos y espero que te ayude. (Y)

3
  • Te luciste ¡Gracias! @Darwin97VA La opción javascript resolvió mi problema. Solo tuve que añadir comillas a [id="featured-20:50"] y aplicó a todas las id. Por otra parte, probé la sugerencia Jquery y no aplicó. Me hubiese gustado tener a Jquery para resolverlo, por el asunto de los browsers. Y gracias por apuntar las consideraciones, me ha sido útil para diferenciar las funciones de "class" y de una "id", cuidaré ese detalle; no obstante, el problema que planté es lo que necesitaba y lo resolviste. ¡Gracias! (Opcional:¿me ayudas con Jquery? Si no hay modo, no te preocupes utilizaré Javascript)
    – Carola
    el 30 may. 2020 a las 12:08
  • ¡Sí hay modo! Lo que sucede es que lo escribí mal. Faltó las comillas en el valor del id, es decir las comillas entre el featured-20:50. Lo mismo se aplica para el caso de Javascript. const articles = $('[id="featured-20:50"]'); El selector CSS soporta con comillas o sin ellas, por eso no me percaté de a primeras que no funcionase así. Lo acabo de probar en un codepen y funciona con comillas. codepen.io/darwin97/pen/YzwymOg
    – Darwin97VA
    el 9 jun. 2020 a las 15:42
  • ¡Estupendo! @Darwin97VA, lo acabo de probar y ambos funcionan a la perfección. Gracias por tu ayuda. Estoy segura que esto también ayudará a otras personas que requieran este recurso auxiliar. Gracias por tomarte el tiempo y ayudarme por medio de esta comunidad. Un abrazo ;)
    – Carola
    el 10 jun. 2020 a las 23:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.