Using this with pseudo selectors jquery

Question

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.

Answer 1

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

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

Answer 2

Use find() instead. Example:

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

Answer 3

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;
}

Answer 4

Use following code

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

Or

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