How to select and use the value of a srcset attribute?

Question

Currently I'm setting up some code to dynamically change a specific button on the page based on information provided in a key. I am relatively new to programming and jQuery/JavaScript and I am thankful for all answers!

Problem: I want to save an URL that is a value of a srcset attribute so that it can be saved to the key for the changing of the button-link. There are a few srcset attributes and my needed value has a unique identifier in the URL (e.g. www.url.com/this-is-a-sample-image/KQ4/... with KQ4 being the unique identifier). The other srcset attributes have KQ6, KQ2, and so on, as an example.

How can I select my needed srcset attribute (as info: it is always in the same position under the tag) and save it's content to the key?

I have tried various jQuery methods to get my needed srcset selected, but I am not able to search specifically for my KQ4 one:

$("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']")

Expected outcome would be to get the whole URL from the needed 1st srcset and save it to a specific key. As of now I still haven't been able to figure out how to do it exactly.

A pointer to the appropriate part of the documentation would be enough as well, as I want to learn JavaScript!

user_2008111 · Answer

one solution is add the KQ4 in the selector

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

console.log(element.srcset);

another solution is select all elements, iterate over them and check the string value:

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

user_860099 · Answer

Try

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

user_649504 · Answer

Your attempt using * and contains should work, only mistake you did is you are trying to match the div content instead of source inside div content.

Try below code

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

How to select and use the value of a srcset attribute?

3 Answers