jQuery: How to find element with same src

Question

I have two separate div elements, each containing img elements.

<div>
    <img class="circle" src="one.jpg"/>
    <img class="circle" src="two.jpg"/>
    <img class="circle" src="three.jpg"/>
</div>

<div>
    <img class="square" src="one.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="six.jpg"/>
</div>

In this example, one set of img elements has the same src value.

If I click on <img class="circle" src="one.jpg"/> in the first div, what is the best way to find the img with class="square" containing the same src value using jQuery?

`$("img[src='one.jpg']");` read here: http://stackoverflow.com/questions/4498177/find-image-src-that-contains — tech2017, May 18 '17 at 19:32
Usually, a great idea to try SOMETHING and come back with a "Hey, this didn't work and I don't know why." Otherwise, this begins to feel like doing someone's homework FOR them. — Snowmonkey, May 18 '17 at 19:35
That's understandable. I really just didn't know what to try. There are a lot of people that come on here because they're very new to this and don't know what they're doing (like myself). I will keep that in mind for future posts, though. Thanks. — rpivovar, May 18 '17 at 19:36

score 2 · Accepted Answer · answered May 18 '17 at 19:31

You can see what the source is of the clicked element and then build a selector that goes and selects images of the same source.

$("img").click(function(){
  // Grab the source from the clicked element
  var src = $(this).attr("src");
  // Select other elements with the same source and do something with it.
  $("img[src='"+src+"']").css("border", "1px solid red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img class="circle" src="one.jpg"/>
    <img class="circle" src="two.jpg"/>
    <img class="circle" src="three.jpg"/>
</div>

<div>
    <img class="square" src="one.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="six.jpg"/>
</div>

Upvote for commenting your code. This week, that's my major mantra. Nicely done. — Snowmonkey, May 18 '17 at 19:34
Definitely agree on the code commenting. I'm trying to do this as much as possible now. — rpivovar, May 18 '17 at 20:16

score 2 · Answer 2 · answered May 18 '17 at 19:41

Use attr selector combined with the class, and make sure they have the same src otherwise you should validate if the src exists...

$('.circle').click(function(){
  var src=$(this).attr('src').trim();
  var squareImage = $('.square[src="'+src+'"]');
  console.log(squareImage); 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img class="circle" src="one.jpg"/>
    <img class="circle" src="two.jpg"/>
    <img class="circle" src="three.jpg"/>
</div>

<div>
    <img class="square" src="one.jpg"/>
    <img class="square" src="two.jpg"/>
    <img class="square" src="three.jpg"/>
</div>

score 1 · Answer 3 · answered May 18 '17 at 19:33

Assuming you only want to highlight the images in all sibling divs, rather than also highlighting the clicked image, here you go.

$("img").on("click", function(){
  // First, remove the highlight from ALL images
  $("img").removeClass("foo");
  // Next, in all sibling divs to this img's
  //  parent div, find any with a matching src.
  //  For those that match, add the highlight.
  $(this).parent().siblings().find("[src='"+$(this).attr("src")+"']").addClass("foo");
  
  });

img {
  width: 50px;
  height: 50px;
}
.foo{
  border: 1px solid red;
  background-color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-pane">
<div>
    <img class="circle" src="one.jpg"/>
    <img class="circle" src="two.jpg"/>
    <img class="circle" src="three.jpg"/>
</div>

<div>
    <img class="square" src="one.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="six.jpg"/>
</div>
</div>

jQuery: How to find element with same src

3 Answers3