Элемент JQuery find (), который находится в том же элементе div, что и элемент, вызвавший событие

0

У меня есть этот HTML-код для системы запросов:

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

Это два элемента класса.request. В каждом элементе запроса есть элемент кнопки с именем класса "acceptRequest". Когда нажата кнопка.acceptRequest, должен появиться элемент с именем класса.profilesList (по умолчанию он по умолчанию не отображается). Тем не менее, каждый элемент.request имеет выделенный ему элемент profilesList, поэтому, когда нажата кнопка acceptRequest первого элемента.request, должен появиться элемент profileList из первого элемента.request, когда acceptButton второго элемента.request щелкнуть, появится список профилей второго запроса и т.д.

Я использовал JQuery find() для достижения этого:

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

Этот код, однако, влияет на элемент profilesList обоих элементов запроса, но мне нужно только увидеть тот, на который я нажал.

Может ли кто-нибудь помочь мне с этим?

Теги:

3 ответа

1
Лучший ответ

Вы можете использовать closest() чтобы найти ближайший родительский .request, затем найти что-нибудь в этом и т.д.

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

FIDDLE

Поделиться
  • 0
    ближайший не сработает в этом случае
  • 3
    @EhsanSajjad - Конечно, это будет
Показать ещё 7 комментариев
0

Если посмотреть на структуру DOM, вы можете использовать .parent() вместе с .find() для получения .profilesList:

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

Рабочая демонстрация

Поделиться
0

Вы можете использовать $(this) для целевого текущего элемента .acceptRequest а также .siblings(), поскольку .profilesList является родным братом вашего .acceptRequest:

Получите братьев и сестер каждого элемента в наборе согласованных элементов, опционально отфильтрованных селектором.

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

Демо-версия скрипта

Поделиться
  • 0
    Спасибо! Ваш тоже работает, я просто использовал код парня выше, потому что его ответ был сверху. Спасибо вам обоим, ребята!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню