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(); }
);

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(); }
);

• javascript
• jquery
• click
• find
• this

• Use a direct selection instead of finding the element – user4396006 Commented Dec 27, 2014 at 0:47
• In the element clicked just don't find it, use this directly and in the other one, go to the parent and then get the children and then find the element – user4396006 Commented Dec 27, 2014 at 0:48
• BTW I think find should return an array. Am I right? – user4396006 Commented Dec 27, 2014 at 0:48
• .find() is for searching for nested elements. There's nothing nested inside the icon. – Barmar Commented Aug 11, 2024 at 17:07

5 Answers 5

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();

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(); }
);

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()
    })
})

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(); }
);

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

e.g

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