jquery hasClass matching element

Question

In jquery can I combine "closest" or Parents() with "hasClass", so it will give me a closest element with given class, if it exists on a page?

var matchingDiv = $(this).closest('div').hasClass('SomeClass')

if ( matchingDiv != null )
{
   //we found matching element now manipulate it

}

I will always have either one matching div element, or none. Thanks.

user113716 · Accepted Answer · 2010-02-08 20:42:03Z

5

var matchingDiv = $(this).closest('div.SomeClass')

if ( matchingDiv.length )
{
   // use length to find if there was a match.
   // closest() will always return an object.
}

If this doesn't work, perhaps post some html. Maybe there's a problem there?

edited Feb 8, 2010 at 20:42

answered Feb 8, 2010 at 20:18

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Victor Over a year ago

It does work, thanks a lot. Documentation states that it returns null, if no matching elements found

Doug Neiner Over a year ago

@Patrick, you could also shorten to just if (matchingDiv.length) since 0 will evaluate to false

user113716 Over a year ago

@Doug, Very true. More concise and concise is good. Will correct.

user113716 Over a year ago

@VictorS - Actually the documentation for closest() states ' The returned jQuery object contains zero or one element '. (Had to check on that one.) No matter what, you're getting an Object.

kmehta · Accepted Answer · 2010-02-08 19:52:57Z

1

try this, closest takes a selector:

var matchingDiv = $(this).closest('div.SomeClass')

if ( matchingDiv != null )
{
   //we found matching element now manipulate it

}

answered Feb 8, 2010 at 19:52

kmehta

2,5056 gold badges31 silver badges38 bronze badges

5 Comments

Victor Over a year ago

I've tried it before it doesn't work for the reasons unknown to me, it should imo

kmehta Over a year ago

strange, how about this: $(this).parents('div').find('.SomeClass:first')

user113716 Over a year ago

This does not work. You test for null will always be true, even if there was no match.

Victor Over a year ago

That seems to be the case, how should I change test then to make it valid?

user113716 Over a year ago

@VictorS - I've added an answer with the proper test.

Naeem Sarfraz · Accepted Answer · 2010-02-08 20:27:07Z

1

Closest takes a selector so you can do this:

 var matchingDiv = $(this).closest('div.SomeClass')

Your next line is a problem, you should be checking a jQuery result like so:

if ( matchingDiv.length )
{
    //we found matching element now manipulate it
}

answered Feb 8, 2010 at 20:27

Naeem Sarfraz

7,4305 gold badges39 silver badges63 bronze badges

Comments

Robin Maben · Accepted Answer · 2012-04-01 18:15:38Z

1

If you need to check whether the current element itself might be the ancestor you're looking for.. You can use a combination of is() and closest() as follows :

var matchingDiv = $(this).closest('.SomeClass');

matchingDiv = matchingDiv.length == 0 ? (matchingDiv.is('.SomeClass') ? matchingDiv : null) : matchingDiv

if ( matchingDiv != null )
{
   //found matching element 

}

edited Apr 1, 2012 at 18:15

answered Mar 28, 2012 at 10:55

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Comments

Vivin Paliath · Accepted Answer · 2010-02-08 19:50:11Z

0

Are you asking if this will work or not?

Off the top of my head, I would say that it does, because the jQuery paradigm is based on chaining together jQuery functions.

answered Feb 8, 2010 at 19:50

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

Comments

andres descalzo · Accepted Answer · 2010-02-08 19:50:25Z

0

doc for closest

var matchingDiv = &(this).closest('.SomeClass')

if ( matchingDiv != null )
{
   //we found matching element now manipulate it

}

answered Feb 8, 2010 at 19:50

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

2 Comments

user113716 Over a year ago

Sounds like he specifically wants a 'div' element with the class.

andres descalzo Over a year ago

@patrick, I included the link of the documetacion of "closest", I think @VictorS can view the documentation and complete what you need

Pointy · Accepted Answer · 2010-02-08 19:53:03Z

0

The difference between closest() and parents() is that parents() can give you more than one element if your selector matches more than one. (for what that's worth here)

answered Feb 8, 2010 at 19:53

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

jquery hasClass matching element

7 Answers 7

4 Comments

5 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

5 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related