У меня есть этот 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 обоих элементов запроса, но мне нужно только увидеть тот, на который я нажал.
Может ли кто-нибудь помочь мне с этим?
Вы можете использовать closest()
чтобы найти ближайший родительский .request
, затем найти что-нибудь в этом и т.д.
$(".acceptRequest").click(function(){
$(this).closest(".request").find(".profilesList").show();
});
Если посмотреть на структуру DOM, вы можете использовать .parent()
вместе с .find()
для получения .profilesList
:
$(".acceptRequest").click(function(){
$(this).parent().find(".profilesList").show();
});
Вы можете использовать $(this)
для целевого текущего элемента .acceptRequest
а также .siblings(), поскольку .profilesList
является родным братом вашего .acceptRequest
:
Получите братьев и сестер каждого элемента в наборе согласованных элементов, опционально отфильтрованных селектором.
$(".acceptRequest").click(function(){
$(this).siblings('.profilesList').show();
});