How to select an image having or not having particular 'alt' attribute using jquery

jquery select image by alt
img alt
how to get image alt value in jquery
javascript get alt text of an image
alternate image html
jquery get alt text of image
set image alt javascript
add alt text to image jquery

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 i.e. 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>

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" />

How to select an image having particular 'alt' attribute using jquery , You could use :has() selector as follow. $('.bb-item:has(img[alt="5 copy_200comp .jpg"])').show();. The selector .bb-item:has(img[alt="5 copy_200comp.jpg"]) will� This will just alert the src attribute of image having particular alt. OP knows how to select element having particular attribute value. This doesn't solve the main problem of OP. – Tushar Jun 23 '16 at 5:22

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=''>

Selectors, If all conditions in the pattern are true for a certain element, the selector in a DTD or elsewhere, but cannot always be selected by attribute selectors. What makes attributes of type ID special is that no two such attributes can have the if it is not preceded by any other content (such as images or inline tables) on its line . On the site, click the “Choose Images” button, and then find and select the images you want to resize. You can choose a single images or hundreds at once. Click the “Open” button when you’re ready. On the next screen, you can choose how to resize the image—Scale, Longest Side, Width, Height, or Exact Size.

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

Understanding Success Criterion 1.1.1, Sensory: If non-text content is primarily intended to create a specific sensory For example, a person who cannot see a picture can have the text alternative read sites would choose not to conform to WCAG rather than abandon CAPTCHA. of hearing, or who are having trouble understanding audio information for any� For instance, in the image below, using the Magic Wand we would have to select the white portion and inverse the selection because using it on the multi-colored pinwheel would be quite tedious. However, with the Quick Selection Tool, I simply painted one broad stroke across the pinwheel and the resulting selection was remarkably accurate!

How to exclude particular class name from CSS selector , Since it is used to prevent a specific items from list of selected items. Syntax: :not( element) { // CSS Property }. Example:. The Select Subject command lets you select the most prominent subject in an image in a single click. Powered by advanced machine learning technology, Select Subject is trained to identify a variety of objects in an image—people, animals, vehicles, toys, and more.

<picture>: The Picture element, The selected image is then presented in the space occupied by the <img> Offering alternative image formats, for cases where certain formats are not supported. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to Implicit ARIA role, No corresponding role. On your computer, open a web browser, like Chrome or Safari. Go to Google Images. Click Search by image. Click Upload an image Choose file or Browse.

Selecting Elements, The most basic concept of jQuery is to "select some elements and do Elements that have not been added to the DOM will always be jQuery provides pseudo selectors to select form-specific elements according to their type: :password � : reset � :radio � :text � :submit � :checkbox � :button � :image � :file. Select the Magic Wand Tool, but do not click anywhere on your image. Choose the Select Subject button at the top of the application. You should now have a rough selection of the subject. Click on Subtract from Selection at the top of the screen. Then, click on any areas of the selection that don’t belong to the subject (such as the shadows under these tangerines).

Comments
  • suppose i have a png image alt="facebook" it should show alt="facebook" in place of "png-image" but in view source it is showing "png-image" in place of alt="facebook" .
  • Thanks for your prompt reply Sir I want to know will above mentioned code work for both condition i.e. if alt="abcd" is mentioned then it will show "abcd" as alternative text but in case alt is not mentioned it will show png-image.
  • Yes, it will select all the images having no alt attribute and will set "png-image" as alt for those.