CODEWITHSUNDEEP
jqueryhtml
user3507281
user3507281

Reputation: 13

JQuery find() element that's in the same div as the element that fired the event

I have this HTML for a contact request system:

<div class="request">
    <img src=" static/img/user/personalProfilePicture/mod_50_50/f31e80de993a4eff4561d5368fe0a7792c2cbfde.jpg " alt=" Hakan" class="requestPic" />
    <a href="#" class="requestName">Hakan Simsir</a>
    <!--<a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66 " class="acceptRequest"></a>-->
    <button class="acceptRequest"></button>
    <div class="requestUnderline"></div>
    <div class="profilesList">
        <ul class="profilesListUl">
            <li class="profilesListLi">
                <span style="font: 15px sans-serif, arial; color: #777;">Add this person to a profile</span>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=1" class="profilesListA">Family</a>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=2" class="profilesListA">Friends</a>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=3" class="profilesListA">Work</a>
            </li>
        </ul>
    </div>
</div>
<div class="request">
    <img src=" static/img/user/personalProfilePicture/mod_50_50/f31e80de993a4eff4561d5368fe0a7792c2cbfde.jpg " alt=" Hakan" class="requestPic" />
    <a href="#" class="requestName">Hakan Simsir</a>
    <!--<a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66 " class="acceptRequest"></a>-->
    <button class="acceptRequest"></button>
    <div class="requestUnderline"></div>
    <div class="profilesList">
        <ul class="profilesListUl">
            <li class="profilesListLi">
                <span style="font: 15px sans-serif, arial; color: #777;">Add this person to a profile</span>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=1" class="profilesListA">Family</a>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=2" class="profilesListA">Friends</a>
            </li>
            <li class="profilesListLi">
                <a href="../scrapll_m_nonstatic/process/cont/accept.php?uid1=68&uid2=66&p_id=3" class="profilesListA">Work</a>
            </li>
        </ul>
    </div>
</div>

These are two elements of the class '.request'. In each request element there is a button element with the classname 'acceptRequest'. When the .acceptRequest button is clicked, the element with classname '.profilesList' should appear (it's got display none by default). However, every .request element has the element profilesList dedicated to it, so when the acceptRequest button of the first .request element is clicked, the profilesList element of the first .request element has to appear, when the acceptButton of the second .request element is clicked, the profilesList of the second request should appear etc.

I've used JQuery find() to achieve this:

$(".acceptRequest").click(function(){
    $(".request").find(".profilesList").css( "display", "block" )
});

This code, however, affects the profilesList element of both request elements, but I only need to see the one I clicked for.

Can anyone help me out with this?

Upvotes: 0

Views: 55

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Looking at DOM structure, You can use .parent() along with .find() to get .profilesList:

$(".acceptRequest").click(function(){
    $(this).parent().find(".profilesList").show();
});

Working Demo

Upvotes: 0

Felix
Felix

Reputation: 38112

You can use $(this) to target current clicked .acceptRequest element along with .siblings() since .profilesList is the sibling of your .acceptRequest:

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$(".acceptRequest").click(function(){
    $(this).siblings('.profilesList').show();
});

Fiddle Demo

Upvotes: 0

adeneo
adeneo

Reputation: 318282

You can use closest() to find the closest parent .request, then find anything in that etc.

$(".acceptRequest").click(function(){
    $(this).closest(".request").find(".profilesList").show();
});

FIDDLE

Upvotes: 1

Related Questions