Getting an element using jquery with similar class names

Question

I have a 2 div tags which a similar class names, the only difference is that the second div has an extended class name. How can I retrieve the 2 elements seperately in 2 different variables using jquery.

<div class='container'>
  <div class='submit'></div>
  <div class='submit newClass'></div>
</div>

From the above example I need the item which has the class 'submit' and not 'submit newClass'.

If i did $('div.container .submit'), this gives me both the div tags. How can i acheive this. I would not like to use index based selections or by using the 'first' method in jquery.

James Allardice · Accepted Answer · 2011-09-03 11:33:00Z

3

In your example, the second div does not really have an "extended class name" as you put it, it has two separate classes, submit and newClass. If that's the case, you can exclude elements matching .newClass from your selection using the :not pseudo-selector:

var elements = $(".submit:not(.newClass)");

Alternatively, you could use the not method:

var elements = $(".submit").not(".newClass");

If on the other hand your example is wrong and you do actually have an longer class name that starts with "submit", you can use the "contains word" selector:

var elements = $("[class~=submit]");

edited Sep 3, 2011 at 11:33

answered Sep 3, 2011 at 11:27

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

Comments

Digital Plane · Accepted Answer · 2011-09-03 11:26:46Z

0

Use :not with the class you don't want:

 $('div.container .submit:not(.newClass)')

answered Sep 3, 2011 at 11:26

Digital Plane

38.4k7 gold badges60 silver badges59 bronze badges

Collectives™ on Stack Overflow

Getting an element using jquery with similar class names

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related