jQuery каждой функции, пропустить определенный элемент

Question

Я пытаюсь использовать каждую функцию jQuery: http://api.jquery.com/each/

У меня есть список вещей, и я хочу выполнить разные JavaScript для разных элементов списка.

Вот HTML-код:

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

А вот и 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();
});

Проверьте это на jsfiddle здесь: http://jsfiddle.net/73gB9/

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как определить, какой элемент списка выбран, и, таким образом, запустить другой javascript. Например, я хочу запустить оповещение «ИСТИНА» для первого элемента в списке, однако оно запускает оповещение «ЛОЖЬ» в своем текущем состоянии.

Я знаю, что это должно быть возможно, однако я неопытен в Javascript & jQuery и не смог разобраться с поиском в Интернете.

С помощью приведенного выше кода, если вы укажете ul с классом 'non-stuff', он выдаст предупреждение «ИСТИНА», в противном случае появится предупреждение «ЛОЖЬ».

Так что, если вы знаете наилучший практический способ сделать это, то я очень хочу услышать ваш ответ. Особенно, если это поможет мне в изучении Javascript: -)

Спасибо.

Answer 1

Похоже, вы путаете свои <ul> и <li> с.Вы близки.

Если вы хотите, чтобы плагин работал на <ul>, сделайте эту модификацию:

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;
        };
    });
};

И вы можете улучшить это, обрезав элементы, которые вы не делаетенужно из выбора.

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

Answer 2

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;
    };
});

Answer 3

В данный момент кажется, что вы перебираете массив, который содержит только список.Попробуйте сделать это так:

$(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;
        };
    });
});

Answer 4

Просто измените селектор, чтобы он смотрел на детей в этом случае.

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;
    };
});