Jquery select this + class

Question

How can I select a class from that object this?

$(".class").click(function(){
        $("this .subclass").css("visibility","visible");
})

I want to select a $(this+".subclass"). How can I do this with Jquery?

Adil · Accepted Answer · 2018-05-22T04:45:37.830

141

Use $(this).find(), or pass this in context, using jQuery context with selector.

Using $(this).find()

$(".class").click(function(){
     $(this).find(".subclass").css("visibility","visible");
});

Using this in context, $( selector, context ), it will internally call find function, so better to use find on first place.

$(".class").click(function(){
     $(".subclass", this).css("visibility","visible");
});

edited May 22 '18 at 04:45

answered Jul 19 '13 at 12:20

Adil

1

If `find()` is being called internally in the second method, why are you still calling it manually? – shaneparsons Mar 28 '16 at 13:57

score 26 · Answer 2 · answered Jul 19 '13 at 12:21

26

Maybe something like: $(".subclass", this);

answered Jul 19 '13 at 12:21

Kamil

1

This is a great alternative. using the context +1 – iConnor Jul 19 '13 at 12:23
1

@Connor This is an alternative but not so great. Anyway +1 too – A. Wolff Jul 19 '13 at 12:32
1

I appreciate your opinion @roasted – iConnor Jul 19 '13 at 12:47
@Connor i mainly said that because using context for child selector was supposed to be deprecated: `$('> child',context)`. This was what appear in previous jquery DOC: >>Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.<< But this disappear from doc and not concern context equivalent to .find(), so... ;) – A. Wolff Jul 19 '13 at 12:55
@A.Wolff any news on this, is it still safe to use? – Hastig Zusammenstellen Mar 04 '17 at 00:59

score 12 · Answer 3 · answered Jul 19 '13 at 12:20

12

$(this).find(".subclass").css("visibility","visible");

answered Jul 19 '13 at 12:20

techfoobar

score 3 · Answer 4 · edited Feb 03 '15 at 02:38

3

What you are looking for is this:

$(".subclass", this).css("visibility","visible");

Add the this after the class $(".subclass", this)

edited Feb 03 '15 at 02:38

chiwangc

answered Feb 03 '15 at 01:39

Gabriel Comeau

1

This really helped me when trying to animate an SVG for something and find wasn't working how I needed it. – Xander Sep 09 '15 at 20:18

score 1 · Answer 5 · answered Oct 15 '15 at 12:51

1

if you need a performance trick use below:

$(".yourclass", this);

find() method makes a search everytime in selector.

answered Oct 15 '15 at 12:51

Matricore

score 1 · Answer 6 · answered Apr 27 '16 at 09:55

Well using find is the best option here

just simply use like this

$(".class").click(function(){
        $("this").find('.subclass').css("visibility","visible");
})

and if there are many classes with the same name class its always better to give the class name of parent class like this

$(".parent .class").click(function(){
            $("this").find('.subclass').css("visibility","visible");
    })

6 Answers6