[英]Target different element inside same section in jquery
I have a page for a members display and I use loop inside foreach to input members. 我有一个供成员显示的页面,并且在foreach中使用循环来输入成员。 each individual member has following html markup 每个成员都有以下html标记
loop starts here 循环从这里开始
<div class="member">
<div class="row wrapper">
<div class="image col-sm-3 col-md-3 col-lg-3 col-xs-12">
<a href="#" class="image-wrapper background-image">
<img src="abc.jpg" alt="member-profile" class="img img-responsive bm-profile-img" >
</a>
</div>
<div class="cont col-sm-9 col-md-9 col-lg-9 col-xs-12">
<div class="row">
<h3>
<a class="title">Title</a>
</h3>
</div>
<div class="row">
<h4 class="summary">
<a href="#">Summary</a>
</h4>
</div>
<div class="row">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="detail read-more" id="bd-read-more">See All</div >
</div>
</div>
</div>
</div>
loop ends here 循环到此结束
div description is hidden by default. div描述默认情况下是隐藏的。 When someone clicks on See All, it should be shown. 当某人单击“查看全部”时,应显示它。 I can achieve it by using simple jQuery, like this 我可以通过使用简单的jQuery这样来实现
$("#bd-read-more").click(function(){
$(".description").slideToggle('slow', 'swing');
});
My problem is, since I have multiple .description
divs (one for each member), the all .description
divs responds to one See All button click. 我的问题是,因为我有多个.description
div(每个成员一个),所以所有.description
div都响应一个“查看全部”按钮的单击。
How can I make only .description
div from clicked See All button section respond? 如何才能使单击“查看所有”按钮部分中的.description
div响应?
You can do it like this. 您可以这样做。
$(".read-more").click(function() { // Note I've changed from ID to class, since ID shall always be unique
$(this).closest(".wrapper").find(".description").slideToggle('slow', 'swing');
});
.closest('.wrapper')
is going "up" in your html tree and looking for the first element with the class wrapper
. .closest('.wrapper')
在您的html树中“上升”,并使用类wrapper
查找第一个元素。
.find('.description')
is looking "down" in your html and finding all elements with the class description
.find('.description')
在您的html中查找“向下”并找到具有类description
所有元素
This will look for the closest element with the class wrapper
and then find the description
element and work the magic on it. 这将寻找与类wrapper
最接近的元素,然后找到description
元素并对其进行处理。
Demo 演示
$(".read-more").click(function() { $(this).closest(".wrapper").find(".description").slideToggle('slow', 'swing'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="member"> <div class="row wrapper"> <div class="image col-sm-3 col-md-3 col-lg-3 col-xs-12"> <a href="#" class="image-wrapper background-image"> <img src="abc.jpg" alt="member-profile" class="img img-responsive bm-profile-img"> </a> </div> <div class="cont col-sm-9 col-md-9 col-lg-9 col-xs-12"> <div class="row"> <h3> <a class="title">Title</a> </h3> </div> <div class="row"> <h4 class="summary"> <a href="#">Summary</a> </h4> </div> <div class="row"> <div class="description"> <p>Description</p> </div> </div> <div class="row"> <div class="detail read-more" id="bd-read-more">See All</div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.