jQuery: addClass для каждого элемента списка .next () - PullRequest
Новая
       4

jQuery: addClass для каждого элемента списка .next ()

2 голосов
/ 13 июля 2010

Я пытаюсь использовать 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>

Таким образом, он должен взять первый элемент span с классом .ui-icon и добавить класс, затем следующий из списка и добавить другой класс.

Ответы [ 2 ]

3 голосов
/ 13 июля 2010

.next () находит ближайшего родственника к выбранному вами элементу. В вашем случае выбранный промежуток имеет привязку в качестве следующего брата, а затем ничего. Вам нужно будет вернуться к родительскому li с помощью parent ("li"), использовать next (), чтобы перейти к следующему li в списке, а затем использовать find ("span span"), чтобы добраться до рассматриваемого диапазона. .

Вероятно, легче и намного более читабельно выбрать все пролеты, а затем редактировать каждый в отдельности, например ::1003 

$(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 для этого?

2 голосов
/ 13 июля 2010

Посмотрите на классы CSS3 псевдо. 

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

jQuery поддерживает их: http://api.jquery.com/nth-child-selector/

...