jQuery：如何找到具有相同 src 的元素答案

【问题标题】：jQuery: How to find element with same srcjQuery：如何找到具有相同 src 的元素
【发布时间】：2017-10-18 18:30:26
【问题描述】：

我有两个单独的 div 元素，每个元素都包含 img 元素。

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

在此示例中，一组img 元素具有相同的src 值。

如果我在第一个div 中单击<img class="circle" src="one.jpg"/>，使用jQuery 找到img 和class="square" 包含相同src 值的最佳方法是什么？

【问题讨论】：

你应该展示你所尝试的。
我还没试过。
$("img[src='one.jpg']"); 在这里阅读：stackoverflow.com/questions/4498177/…
通常，尝试一些东西并返回“嘿，这不起作用，我不知道为什么”是个好主意。否则，这开始让人感觉像是在为他们做作业。
这是可以理解的。我真的只是不知道该尝试什么。有很多人来到这里，因为他们对此很陌生，不知道自己在做什么（比如我自己）。不过，我会在以后的帖子中记住这一点。谢谢。

标签： javascript jquery

【解决方案1】：

您可以查看被点击元素的来源，然后构建一个选择器来选择相同来源的图像。

$("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>

【讨论】：

支持评论您的代码。本周，这是我的主要口头禅。做得很好。
绝对同意代码注释。我现在正在尝试尽可能多地这样做。

【解决方案2】：

使用 attr 选择器与类结合，并确保它们具有相同的 src，否则您应该验证 src 是否存在...

$('.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>

【讨论】：

【解决方案3】：

假设您只想突出显示所有同级 div 中的图像，而不是同时突出显示单击的图像，就可以了。

$("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>

【讨论】：