¿Cómo seleccionar y usar el valor de un atributo srcset?

Question

Actualmente estoy configurando un código para cambiar dinámicamente un botón específico en la página según la información proporcionada en una clave. Soy relativamente nuevo en programación y jQuery / JavaScript y estoy agradecido por todas las respuestas.

Problema: deseo guardar una URL que sea un valor de un atributo srcset para que pueda guardarse en la clave para cambiar el enlace del botón. Hay algunos atributos srcset y mi valor necesario tiene un identificador único en la URL ( por ejemplo www.url.com/this-is-a-sample-image/KQ4/... siendo KQ4 el identificador único). Los otros atributos srcset tienen KQ6, KQ2, etc., como ejemplo.

¿Cómo puedo seleccionar mi atributo srcset necesario (como información: siempre está en la misma posición bajo la etiqueta <picture>) y guardar su contenido en la clave?

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

He probado varios métodos de jQuery para seleccionar mi srcset necesario, pero no puedo buscar específicamente mi KQ4:

$("div.unique_img[srcset*=KQ4]") 
$("div.unique_img:contains('KQ4')") 
$('div.unique_img:nth-child(1)') 
$('div.unique_img').find('KQ4') 
$('div.unique_img .srcset') 
$("img[name*='KQ4']")

El resultado esperado sería obtener la URL completa de la primera srcset necesaria y guardarla en una clave específica. A partir de ahora todavía no he podido descubrir cómo hacerlo exactamente.

¡Un puntero a la parte apropiada de la documentación también sería suficiente, ya que quiero aprender JavaScript!

javascript jquery html

3

domix07 18 oct. 2019 a las 15:35

Answer 1

Una solución es agregar KQ4 en el selector

var element = document.querySelector('.unique_img source[srcset*="KQ4"]');

console.log(element.srcset);

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

Otra solución es seleccionar todos los elementos, iterar sobre ellos y verificar el valor de la cadena:

var sources = document.querySelectorAll('.unique_img source');
var targetSource = null;
[...sources].forEach(function(source) {
    
    if(source.srcset.indexOf('KQ4') !== -1) {
        targetSource = source.srcset;
    }
});


console.log(targetSource);

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

2

caramba 18 oct. 2019 a las 12:48

Answer 2

Tratar

document.querySelectorAll('source').forEach(src=> {
  if(/KQ4/.test(src.srcset)) {
    // 'src' contains selection
  }
});

document.querySelectorAll('source').forEach(src=> {
  if(/KQ4/.test(src.srcset)) {
    console.log( src.media );
    // your selected source tag is in 'src'`
}});

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

0

Kamil Kiełczewski 18 oct. 2019 a las 12:58

Answer 3

Su intento de usar * y contains debería funcionar, el único error que cometió es que está tratando de hacer coincidir el contenido div en lugar de la fuente dentro del contenido div.

Prueba el siguiente código

$("div.unique_img  source[srcset*=KQ4]") // this will return matching image having matching `srcset`

0

Bhushan Kawadkar 18 oct. 2019 a las 12:48

¿Cómo seleccionar y usar el valor de un atributo srcset?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript