How to check if class attribute exist?

Question

I'm trying to check if there is no class tag within a <li> </li> tag.

For example, if I have this:

<li class="menu...."> words </li>

I want to ignore it. However if I have this:

<li> words </li>

I want to use it.

What I currently have is something along the lines of:

$("li").each(function() {
    if ($(this).classList.contains('') {
        do function
    }
})

However, this is not working - how would I go about doing this?

Thanks in advance

@SurferL, then the answer of **Sterling Archer** wil help you, see below. — Arkni, Sep 17 '14 at 20:58

score 6 · Accepted Answer · answered Sep 17 '14 at 20:31

6

$('li:not([class])');

This will select all li elements without a class at all. You can replace [class] with a specific class as well, or use hasClass.

answered Sep 17 '14 at 20:31

Sterling Archer

21,348
17
79
113

would that hit empty class attribs ? – dandavis Sep 17 '14 at 20:34
@dandavis no, OP wants `li` without the class attribute, so an empty class will not be selected – Sterling Archer Sep 17 '14 at 20:35
@SterlingArcher Would you then do the function after that like: `$('li:not([class])'); do function` ? – Rekovni Sep 17 '14 at 20:58
Running it through the each loop will be the same as what you did in your question – Sterling Archer Sep 17 '14 at 20:59
@SterlingArcher So it would be: `$('li:not([class])').each(function() { etc }` ? – Rekovni Sep 17 '14 at 21:05

Pointy · Answer 2 · 2014-09-17T20:36:53.377

4

You can do this:

$("li:not(.menu)").whatever();

That's not the fastest way necessarily; it may be faster to do this:

$("li").filter(function() { return !$(this).hasClass("menu"); }).whatever()

edit if you want to operate on <li> elements that have no class, then just check the .className property:

$("li").filter(function() { return !$(this).prop("className"); }).whatever()

However, I would suggest that that's not a good coding pattern. It's fragile because it relies on any future changes to your page for purposes completely unrelated to what you're doing now not involving the addition of a class. You'd be better off explicitly checking for specific classes that you're not interested in.

Like, maybe 3 months from now, somebody decides that all the list items that are about penguins be made black and white. You then add the class "penguin" to all those <li> elements. If you don't remember this change you're making now, all of a sudden that functionality will be broken.

edited Sep 17 '14 at 20:36

answered Sep 17 '14 at 20:30

Pointy

389,373
58
564
602

OP is trying to check for the class attribute from what I understand – Huangism Sep 17 '14 at 20:31
@Huangism he wants to operate on `
` elements that do *not* have a particular class.

Pointy

Sep 17 '14 at 20:32

It's just an example, see the first line in the description. By tag I am sure OP means attribute – Huangism Sep 17 '14 at 20:33

@Huangism yes I see. I explained in my update that that's probably an anti-pattern to be avoided. – Pointy Sep 17 '14 at 20:34

Black Sheep · Answer 3 · 2014-09-17T20:51:50.310

1

You can use prop()

$("li").each(function() {

    if (!$(this).prop("class")) {

        doFunction();
    }
});

DEMO

edited Sep 17 '14 at 20:51

answered Sep 17 '14 at 20:40

Black Sheep

6,404
7
29
49

@dandavis - Thanks! I fixed – Black Sheep Sep 17 '14 at 20:52
if you want to use prop(), use "className" because "class" is a legacy binding to the attribute. search http://code.jquery.com/jquery-1.11.1.js for "propFix:"... – dandavis Sep 17 '14 at 21:27
@dandavis - What I understand is that (only) for < IE 8? Right? – Black Sheep Sep 19 '14 at 01:26

score 0 · Answer 4 · answered Sep 17 '14 at 20:32

0

The classList is only available on Element instances, not on the jQuery object.

$("li").each(function() {
  if (this.classList.length === 0) {
    do function
  }
})

answered Sep 17 '14 at 20:32

loganfsmyth

146,797
27
317
241

How to check if class attribute exist?

4 Answers4