jQuery：为列表的每个 .next() 元素添加类答案

【问题标题】：jQuery: addClass for each .next() element of a listjQuery：为列表的每个 .next() 元素添加类
【发布时间】：2011-03-15 12:02:45
【问题描述】：

我尝试使用 jQuery 为每个 Span 元素添加不同的类，使用 .next() 这是javascript：

<script type="text/javascript">

    $(function() {
        $("a", "div.top_menu").addClass("ui-icons-custom");

        $("span.ui-icon:first", "ul.top_menu_list").addClass("ui-icon-pencil")
            .next().addClass("ui-icon-comment")
            .next().addClass("ui-icon-key");
    });

</script>

这是我试图让它工作的 HTML：

<div class="top_menu ui-state-default-custom">
                <ul class="ui-widget top_menu_list">

                    <li>
                        <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
                            <a href="test">Registrarse</a>
                        </span>
                    </li>
                    <li>
                        <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
                            <a href="test1">Agregar un anuncio</a>
                        </span>
                    </li>
                    <li>
                        <span style="float: left;" class="ui-icon-text-custom"><span style="float: left;" class="ui-icon"></span>
                            <a href="test2">Ingresar (Login)</a>
                        </span>
                    </li>
                </ul>
            </div>

所以它应该使用 .ui-icon 类的第一个 'span' 元素并添加一个类，然后从列表中获取下一个元素并添加其他类。

【问题讨论】：

标签： jquery html addclass next

【解决方案1】：

看看 CSS3 伪类。

$('li:odd span.ui-icon')

jQuery 支持它们：http://api.jquery.com/nth-child-selector/

【讨论】：

【解决方案2】：

.next() 查找您选择的元素的下一个直接兄弟。在你的情况下，你选择的跨度有一个锚作为它的下一个兄弟，然后什么都没有。您必须使用 parent("li") 回到父 li，使用 next() 到列表中的下一个 li，然后使用 find("span span") 到有问题的跨度.

选择所有跨度然后单独编辑每个跨度可能更容易且更具可读性，例如：

$(function() {
    $("a", "div.top_menu").addClass("ui-icons-custom");

    var $spans = $("span.ui-icon", "ul.top_menu_list");

    // end() reverts us back to the selector before each eq()
    // you can just make this three separate statements if you like
    $spans.eq(0).addClass("ui-icon-pencil").end()
          .eq(1).addClass("ui-icon-comment").end()
          .eq(2).addClass("ui-icon-key");
});

呃，出于好奇，是什么阻止了您直接向元素添加类而不是使用 jQuery 来做呢？

【讨论】：