Question

I have used the hasClass method before but I have a scenario where is reporting as not been present although if I output the elements .html() it clearly shows the class is in use by item aswell as other classes.

The element that the class belongs too was dynamically written to the screen. Any ideas what I’m doing wrong?

$('.myList').each(function (index, item) {

    // Check marked as complete
    if (!$(item).hasClass('complete')) {
        // Not complete
        alert('not complete!' + $(item).html());

        completeFlag = false;
        return false;
    }

});

The html output:

<li id="myid" class="class1 class2 complete">some text</li>

Answer 1

I’m guessing you’re checking the list, where you mean to be checking the list items.

Example of what I think you’re doing:

HTML:

<ul class="myList">
  <li>This is not complete</li>
  <li>Nor this</li>
  <li class="class1 class2 complete">But this is</li>
  <li>And this isn't</li>
</ul>

JavaScript:

$('.myList').each(function (index, item) {

    // Check marked as complete
    if (!$(item).hasClass('complete')) {
        // Not complete
        display('Item not complete: ' + $(item).html());
    }
    else {
        // Is complete
        display('Item IS complete: ' + $(item).html());
    }

});

Live copy (which doesn’t work)

Here’s how you’d check the items: Change

$('.myList').each(function (index, item) {

to:

$('.myList li').each(function (index, item) {
//         ^--- Note that we're now looping the
// list *items*, not the list

Live copy