开发者

Target an element inside the parent div with jQuery

开发者 https://www.devze.com 2023-03-22 09:51 出处:网络
I use this code to show and hide the div with a class named \"text\": $(\".text\").hide(); $(\'.more-link\').click(function(){

I use this code to show and hide the div with a class named "text":

$(".text").hide();
$('.more-link').click(function(){
       $(".text").slideToggle();         
 });

Together with this HTML:

<div class="box">
    <p>Some text</p>
    <div class="text">
        <p>Even more text</p开发者_如何学编程>
    </div>
    <a href="#" class="more-link">Read more</a>
</div>

<div class="box">
    <p>Some text</p>
    <div class="text">
        <p>Even more text</p>
    </div>
    <a href="#" class="more-link">Read more</a>
</div>

I need help to target the specific "div.text" in the parent div. I guess I should use the parent() function, but I don't understand how I should apply it.

Thank you for any help.


You could do (in this way each links shows only the relative text):

$(".text").hide();
$('.more-link').click(function(){
       $(this).prev(".text").slideToggle();         
 });

fidlle: http://jsfiddle.net/QEVXf/


$('.text').hide();
$('.more-link').click(function(){
   $(this).parent().find('.text').slideToggle();         
});


Try :

$(".text").hide();
$('.more-link').click(function(e){
    $(this).parent().find(".text").slideToggle();         
});


$(".text").hide();
$('.more-link').click(function(){
       $(this).siblings(".text").slideToggle();         
 });


Replace

$('.more-link').click(function(){
       $(".text").slideToggle();         
});

with

$('.more-link').click(function(){
       $(this).parent().find(".text").slideToggle();         
});
0

精彩评论

暂无评论...
验证码 换一张
取 消