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。例如，我想为列表中的第一个元素运行“TRUE”警报，但它只在其当前状态下运行“FALSE”警报。

我知道这一定是可能的，但是我对Javascript＆amp; jQuery并且无法通过搜索互联网来解决问题。

使用上面的代码，如果你让ul拥有类'non-stuff'，那么它会输出“TRUE”警告消息，否则会弹出“FALSE”警告。

所以如果你知道这样做的最佳实践方式，那么我很想听听你的回答。特别是如果它帮助我学习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;
    };
});

jQuery的每个函数，跳过一个特定的元素

4 个答案: