0

I'd like to know if there is a way to use this with CSS pseudo selectors - (AKA nested elements) in jQuery. Here's what it might look like.

    $('#element').click(function(){
        $(this' .nested').css('height','100px');
    });

But this isn't how the syntax works. I'd just like to know how it would work.

Micky Munns
  • 5
  • 1

4 Answers4

0

when you use $(this) use .find() to get the element you want like this

$('#element').click(function(){    
   $(this).find('.nested').css('height','100px');
});
Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28
0

Use find() instead. Example:

$('#element').click(function(){
    $(this).find('.nested').css('height','100px');
});
MH2K9
  • 11,951
  • 7
  • 32
  • 49
0

You can either use .css() or also toggle a class in jQuery and set the CSS property inside your CSS file which It's usually more performing and reusable.

$('#element').click(function(){    
   $(this).find('.nested').css('height','100px');
});

or also 

$('#element').click(function(){    
   $(this).find('.nested').toggleClass('height-nested');
});

CSS

.height-nested{
   height: 100px;
}
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
0

Use following code

$('#element').click(function(){
    $('.nested',this).css('height','100px');
});

Or

$('#element').click(function(){
    $(this).find('.nested').css('height','100px');
});
Nasir Mahmood
  • 1,445
  • 1
  • 13
  • 18
  • I liked your answer , just to add performance stuff , first is slow respect to second http://stackoverflow.com/a/8083631/1018054 – Vishal Sharma Dec 06 '14 at 05:59