jQuery each function, skip a specific element

I'm trying to use the jQuery each function: http://api.jquery.com/each/

I have a list of things, and I want to perform different javascript for different list elements.

开发者_运维技巧 Here's the html code:

<ul id="list-with-stuff">
    <li class='non-stuff'>foo</li>
    <li>bar</li>
</ul>

And here's the javascript:

jQuery.fn.stuffplaylist = function() {

    return this.each(function() {

        if ($(this).hasClass('non-stuff')) {
            alert("TRUE. Has non-stuff class");
            return true;
        }
        else {
            alert("FALSE. Has not got non-stuff class");
            return false;
        };
    });
};



$(document).ready(function() {
    $("#list-with-stuff").stuffplaylist();
});

Check it out on jsfiddle here: http://jsfiddle.net/73gB9/

The problem I am having is not being able to work out how to determine what list element is selected, and thus run different javascript. For example I want to run the "TRUE" alert for the first element in the list, however it only runs the "FALSE" alert in it's current state.

I know it must be possible, however I'm inexperienced with Javascript & jQuery and haven't been able to work out from searching the internet.

With the above code if you make ul have the class 'non-stuff' then it does output the "TRUE" alert message, otherwise the "FALSE" alert pops up.

So if you know the best practice way of doing it then I am keen to hear your answer. Particularly if it helps me along with learning Javascript :-)

Thank you.

Looks like you're mixing up your <ul> and <li>s. You're close.

If you want the plugin to operate on <ul>, make this modification:

jQuery.fn.stuffplaylist = function() {

    return this.children('li').each(function() {

        if ($(this).hasClass('non-stuff')) {
            alert("TRUE. Has non-stuff class");
            return true;
        }
        else {
            alert("FALSE. Has not got non-stuff class");
            return false;
        };
    });
};

And you can refine this further by cutting the elements you don't need out of the selection.

   jQuery.fn.stuffplaylist = function() {
        return this.children('li.non-stuff').each(function() {
                //$(this).text() -> 'foo'
                alert("TRUE. Has non-stuff class");
                return true;
        });
    };

return this.each(function(i, element) {
    if ($(element).hasClass('non-stuff') || !i) { // !i == 0 and 0 is first element
        alert("TRUE. Has non-stuff class");
        return true;
    } else {
        alert("FALSE. Has not got non-stuff class");
        return false;
    };
});

Right now it seems that you are cycling through an array, that contains only a list. Try doing it this way:

$(document).ready(function() {
    $("#list-with-stuff li").each(function(index, element){
        if ($(element).hasClass('non-stuff')) {
            alert("TRUE. Has non-stuff class");
            return true;
        } else {
            alert("FALSE. Has not got non-stuff class");
            return false;
        };
    });
});

Just modify the selector so it looks at the children in this case.

return $('#list-with-stuff li').each(function() {

    if ($(this).hasClass('non-stuff')) {
        alert("TRUE. Has non-stuff class");
        return true;
    }
    else {
        alert("FALSE. Has not got non-stuff class");
        return false;
    };
});