Jquery：将一个类添加到一个奇怪的列表元素中答案

【问题标题】：Jquery: Adding a class to even an odd List-ElementsJquery：将一个类添加到一个奇怪的列表元素中
【发布时间】：2012-09-28 06:26:27
【问题描述】：

我有以下 jquery 代码：

<script type="text/javascript">
    $(document).ready(function() {
        $ ('ul.image-list li:even').addClass ('even');
        $ ('ul.image-list li:odd').addClass ('odd');
    });
</script>

以及以下html：

<ul class="image-list">
<li>first element</li>
<li>second element</li>
...
<li>last element</li>
</ul>

但是 jquery 似乎没有被应用，因为 li-tags 没有得到正确的类（偶数或奇数）。我究竟做错了什么？谢谢

【问题讨论】：

对我来说看起来不错（并且有效）。让我们看看你的 CSS。

标签： jquery html css

【解决方案1】：

这对我来说很好用。为什么您认为它在您的代码中不起作用？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $ ('ul.image-list li:even').addClass('even');
            $ ('ul.image-list li:odd').addClass('odd');
        });
    </script>
    <style>
        .even{
            background: gray;
        }
        .odd{
            color:red;
        }
    </style>
</head>
<body>

<ul class="image-list">
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
    <li>fourth element</li>
    <li>fifth  element</li>
    <li>last element</li>
</ul>

</body>
</html>

【讨论】：

【解决方案2】：

您也可以使用： .filter(":odd").addClass("odd")

【讨论】：

【解决方案3】：

首先，您确定将样式表插入到页面中吗？我经常忘记这一点。其次，你有没有将jquery js 文件插入到你的页面中？我经常忘记这一点。第三，按照 peirix 所说的去做，它应该会起作用。我看不出有什么问题。

【讨论】：

【解决方案4】：

~~尝试删除addClass和(之间的空格~~

$ 和您的选择器相同

您是否在使用 Firebug，如果使用，请查看 HTML，并查看是否应用了类名。如果是，您只是忘记链接您的样式表。如果不是，那么您的 javascript 有问题。

【讨论】：

函数名和括号之间的空格是完全可以接受的。
正在应用样式表，但没有应用任何类
这意味着您的 javascript 存在问题。你还记得引用 jQuery 库吗？看看 petersendidit 的回答中的第 5 行。
我必须在部分中引用它吗？或者我可以放在html中的任何地方吗？
这个问题可能是因为列表是由asp:repeater生成的？

【解决方案5】：

是否可以动态创建 li？在这种情况下，添加类的调用不应该在 ready() 上，而是在插入 li 后的回调上。

【讨论】：

如何在回调中添加类？
并且列表中填充了 asp:repeater。但是我认为，这将被称为“动态”，还是我错了？