'Using $(this).find with .click() jQuery

On the click of the plus icon I want the check icon to appear for only the one plus icon in that particular div. Not all plus icons throughout the page. Here is the html followed by the jQuery.

<div class="pin">
        <img class="brand-logo" src="img/nike.jpg" />
        <div class= "hover-popup">
            <h1 class="brand-name">Nike</h1>
            <img class="plus-icon" src="img/plus-icon.png" />
            <img class="check-icon" src="img/check-icon.png" />
        </div>
    </div>

    <div class="pin">
        <img class="brand-logo" src="img/calvinklein.jpg" />
        <div class= "hover-popup">
            <h1 class="brand-name">Calvin Klein</h1>
            <img class="plus-icon" src="img/plus-icon.png" />
            <img class="check-icon" src="img/check-icon.png" />
        </div>

jQuery

$(".plus-icon").click(
    function () { $(this).find('.check-icon').show(); },
    function () { $(this).find('.plus-icon').hide(); }
);

$(".check-icon").click(function() {
    function () { $(this).find('.plus-icon').show(); },
    function () { $(this).find('.check-icon').hide(); }
);

Solution 1:^[1]

First find the containing div, since its an ancestor of .check-icon,.plus-icon use .closest(), then you can use find()

$(this).closest('.hover-popup').find('.check-icon').show();

Solution 2:^[2]

You could use jQuery's siblings selector.

$(".plus-icon").click(
    function () { $(this).siblings('.check-icon').show(); },
    function () { $(this).hide(); }
);

$(".check-icon").click(function() {
    function () { $(this).siblings('.plus-icon').show(); },
    function () { $(this).hide(); }
);

Given your example HTML, this would be the preferred solution.

Alternately, use .parent, then use find to descend from there.

$(".plus-icon").click(
    function () { $(this).parent().find('.check-icon').show(); },
    function () { $(this).parent().find('.plus-icon').hide(); }
);

$(".check-icon").click(function() {
    function () { $(this).parent().find('.plus-icon').show(); },
    function () { $(this).parent().find('.check-icon').hide(); }
);

Finally, if you are not sure where the .hover-popup element will be relative to the button, use .closest to locate it, then descend from there.

$(".plus-icon").click(
    function () { $(this).closest('.hover-popup').find('.check-icon').show(); },
    function () { $(this).closest('.hover-popup').find('.plus-icon').hide(); }
);

$(".check-icon").click(function() {
    function () { $(this).closest('.hover-popup').find('.plus-icon').show(); },
    function () { $(this).closest('.hover-popup').find('.check-icon').hide(); }
);

Solution 3:^[3]

Using Jquery your code will look like:

$(document).ready(function(){     
    $('.plus-icon').click(function(){
        $(this).hide();
        $(this).siblings('.check-icon').show()
    })
    $('.check-icon').click(function(){
        $(this).hide();
        $(this).siblings('.plus-icon').show()
    })
})

Solution 4:^[4]

try this

$(".plus-icon").click(
    function () { $(this).next('.check-icon').show(); },
    function () { $(this).hide(); }
);

$(".check-icon").click(function() {
    function () { $(this).prev('.plus-icon').show(); },
    function () { $(this).hide(); }
);

Solution 5:^[5]

Probably the easiest way is to use .siblings() function.

e.g

$('.plus-icon').click(function(){
   $(this).siblings('.check-icon').show();
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Musa
Solution 2	Alexander O'Mara
Solution 3	MMK
Solution 4	srinath madusanka
Solution 5	Arvs

'Using $(this).find with .click() jQuery

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]