2

.next（）を使用して、jQueryを使用してSpan要素ごとに異なるクラスを追加しようとしています。これは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>

そしてこれはそれを機能させようとしているHTMLImです：

<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'要素を取得してクラスを追加し、次にリストから次の要素を取得して他のクラスを追加する必要があります。

4

2 に答える 2

3

.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を使用してクラスを要素に直接追加するのを妨げているのは何ですか？

于 2010-07-13T19:13:36.423 に答える
2

CSS3の疑似クラスを見てください。

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

jQueryはそれらをサポートしています：http：//api.jquery.com/nth-child-selector/

于 2010-07-13T18:57:53.327 に答える