Menu
Morning all,
I have a list of images like so:
<ul id="preload" style="display:none;"> <li><img src="afx4000z-navy-icon-1_thumb.jpg"/></li> <li><img src="afx4000z-green-icon-1_thumb.jpg"/></li> </ul> Using jQuery how find all image src's within ul#preload that contain a specific string eg."green"
something like...
var new_src = jQuery('#preload img').attr('src')*** that contains green ***; 
947
To use an image on a webpage, use the <img> tag. The tag allows you to add image source, alt, width, height, etc. The src is to add the image URL. The alt is the alternate text attribute, which is text that is visible when the image fails to load.
Use the getAttribute() method to check if an image src is empty, e.g. img. getAttribute('src') . If the src attribute does not exist, the method returns either null or empty string, depending on the browser's implementation.
data-src is used when lazy loading to prevent the default image from loading when the page loads. Most lazy loading libraries will use intersection observer and copy the data-src value to src when it's time to load the image.
You need to use the *= selector:
jQuery('#preload img[src*="green"]') If you want it to be case insensitive, it will be a bit more difficult:
var keyword = "green"; $("#preload img").filter(function(keyword) { return $(this).attr("src").toLowerCase().indexOf(keyword.toLowerCase()) != -1; }); You can use an attribute-contains selector ([attr*=value]), like this:
jQuery('#preload img[src*=green]') If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
