简体   繁体   English

在jQuery的同一部分内定位不同的元素

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM