jQuery: So finden Sie Element mit der gleichen Quelle

Question

Ich habe zwei separate div Elemente, die jeweils img Elemente enthalten.

<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 diesem Beispiel wird ein Satz von img Elementen hat den gleichen Wert src.

Wenn ich auf <img class="circle" src="one.jpg"/> im ersten div klicken, was ist der beste Weg, um die img mit class="square" mit dem gleichen src Wert mit jQuery zu finden?

Answer 1

Sie können sehen, was die Quelle des angeklickten Elements ist und dann einen Selektor erstellen, der Bilder der gleichen Quelle auswählt und auswählt.

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

Answer 2

Vorausgesetzt, dass Sie nur die Bilder in allen Geschwister divs hervorheben möchten, anstatt auch das geklickt Bild markieren, hier gehen Sie.

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

Answer 3

Verwenden attr Wähler mit der Klasse kombiniert, und stellen Sie sicher, dass sie die gleiche src haben sonst sollten Sie überprüfen, ob die src existiert ...

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