如何使用jquery选择具有或不具有特定'alt'属性的图像

Question

I have many .png images and want to get a mentioned name where the alternative text is provided and if not mentioned in alt tag it should show 'png-image'.

Below code is just putting all the png images's alternate text 'png-image'.

Suppose I have an alt text for image ie alt="facebook" it should show alt="facebook" in place of alt="png-image" .

Through View Source it is showing alt="facebook" in place of alt="png-image"

<script type="text/javascript">
    (function ($) {
        $(document).ready(function() {
            // apply Image alt attribute
            $('img[src$=".png"]').attr('alt', 'png-image');
        });
    }(jQuery));
</script>

Answer 1

You can use the .each method to loop over all your images with .png at the end of its src . At each image, you can then check if it has an alt attribute using:

if(!$(this).attr('alt'))

If the image doesn't currently have an alt this if statement will run and so you can then add your own alt attribute to image.

See working example below:

 $(document).ready(function() { $('img[src$=".png"]').each(function() { if (!$(this).attr('alt')) // check if current image tag has alt attribute $(this).attr('alt', 'png-image'); // if it doesn't add 'png-image' alt attribute }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="foo.png" /><br /> <img src="bar.png" alt="this is my own alt" /><br /> <img src="foo2.png" alt="this is my own alt2" /><br /> <img src="foo.png" /> 

This will work for both cases where the alt attribute is either not set, or set to nothing (ie: alt="" )

Answer 2

You can add [alt=""] selector with the current selector

 (function($) { $(document).ready(function() { // apply Image alt attribute $('img[src$=".png"][alt=""]').attr('alt', 'png-image'); }); }(jQuery)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src='https://images.pexels.com/photos/599708/pexels-photo-599708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt='image'> <img src='https://fnetobits.s3.amazonaws.com/galleries/boyerfuneralhome/1819974/1138985594.png' alt=''> 

Answer 3

You can use attribute based selector in JQuery to get all the img tags not having alt attribute,

$(document).ready(function() {
    $('img[src$=".png"][alt='']').attr('alt','png-image');
})