Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting the source of a specific image element with jQuery

I have many image elements and want to get a specific image's source where the alternative text is "example".

I tried this:

var src = $('.conversation_img').attr('src'); 

but I can't get the one I need with that.

How do I select a specific image element based on its alternative text?

like image 454
Irakli Lekishvili Avatar asked May 15 '12 10:05

Irakli Lekishvili


People also ask

How can I get the source of an image in HTML?

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.

Which attribute provided the source of an image?

Definition and Usage. The required src attribute specifies the URL of the image.

How to get and set the image source in jQuery?

In this article, you will learn how to get and set the image src using jQuery. The attr () method to get and change the image source in jQuery. Use the below script to get image src. Use the below script to set the image src. The following example will change the second image to the first image.

How to get and set image src attribute in jQuery?

The attr () method to get and change the image source in jQuery. Use the below script to get image src. Use the below script to set the image src. The following example will change the second image to the first image. <title> How to get and set image src attribute example</title>

How to get images (img) src tags in Div using jQuery?

In jQuery to get images (img) src tags in div element we need to write the code like as shown below. $ ('#divimages').children ('img').map (function () {. return $ (this).attr ('src') }).get () If you want complete example to get image tags in particular div we need to write the code like as shown below. <html>.

How to select input elements with type=image in jQuery?

The :image selector selects input elements with type=image. Syntax $(":image") ❮ jQuery Selectors NEW We just launched W3Schools videos Explore now


2 Answers

To select and element where you know only the attribute value you can use the below jQuery script

var src = $('.conversation_img[alt="example"]').attr('src'); 

Please refer the jQuery Documentation for attribute equals selectors

Please also refer to the example in Demo

Following is the code incase you are not able to access the demo..

HTML

<div>     <img alt="example" src="\images\show.jpg" />     <img  alt="exampleAll" src="\images\showAll.jpg" />    </div> 

SCRIPT JQUERY

var src = $('img[alt="example"]').attr('src'); alert("source of image with alternate text = example - " + src);   var srcAll = $('img[alt="exampleAll"]').attr('src'); alert("source of image with alternate text = exampleAll - " + srcAll ); 

Output will be

Two Alert messages each having values

  1. source of image with alternate text = example - \images\show.jpg
  2. source of image with alternate text = exampleAll - \images\showAll.jpg
like image 103
Murtaza Avatar answered Nov 06 '22 21:11

Murtaza


$('img.conversation_img[alt="example"]')     .each(function(){          alert($(this).attr('src'))     }); 

This will display src attributes of all images of class 'conversation_img' with alt='example'

like image 24
strah Avatar answered Nov 06 '22 22:11

strah