0

jQueryを使用してこのようなことを達成する方法を考えていました:

<ul>
    <li><a href="#id-220" class="id-220 id-320 id-321 id-322">Nunc tincidunt</a></li>
    <li><a href="#id-320" class="id-320 id-321 id-322">Proin dolor</a></li>
    <li><a href="#id-321" class="id-321 id-322">Aenean lacinia</a></li>
    <li><a href="#id-322" class="id-322">Aenean lacinia</a></li>
</ul>

これしかない場合：

<ul>
    <li><a href="#id-220">Nunc tincidunt</a></li>
    <li><a href="#id-320">Proin dolor</a></li>
    <li><a href="#id-321">Aenean lacinia</a></li>
    <li><a href="#id-322">Aenean lacinia</a></li>
</ul>

したがって、基本的には、各リスト項目が兄弟の ID を探して、それらをクラスとして順番に追加する必要があります。最初のリスト項目には 3 つの兄弟があり、それによって 4 つのクラス (彼自身のクラスと兄弟からの 3 つ) が必要です... うまく説明できたことを願っています... TNX!

4

5 に答える 5

2

これを試して

$('li').each(function(){
                cls = $(this).find('a').attr('href');
                cls1 = cls.replace("#", '');
                curli = this;
                $(curli).addClass(cls1);
                $(this).nextAll('li').each(function() {
                    cls = $(this).find('a').attr('href');
                    cls1 = cls.replace("#", '');
                    $(curli).addClass(cls1);
                });

            });
于 2012-10-31T09:14:33.843 に答える
1

これを試して

<ul id="mainUL">
        <li><a href="#id-220">Nunc tincidunt</a></li>
        <li><a href="#id-320">Proin dolor</a></li>
        <li><a href="#id-321">Aenean lacinia</a></li>
        <li><a href="#id-322">Aenean lacinia</a></li>
</ul>


<script type="text/javascript">
        var As = $("#mainUL").find("a");
        for (var i = 0; i < As.length; i++) {
            var curAi = $(As[i]);
            var clas = curAi.attr("href").replace("#", "");
            for (var j = i; j < As.length; j++) {
                var curAj = $(As[j]);
                clas += " " + curAj.attr("href").replace("#", "");
            }
            curAi.addClass(clas);
        }

</script>

より効率的で優れたソリューションもある可能性があることを私は知っています。しかし、これはバグがなくても問題なく動作しています。試してみる価値があります。

于 2012-10-31T08:58:46.853 に答える
0

あなたはこのようにすることができます：

    lastli = $('ul > li:last');
    lastli.children('a').addClass( lastli.children('a').attr('href').replace('#','') );
    while (lastli.prev().length) {
       prevli = lastli.prev();
       prevli.children('a').addClass( lastli.children('a').attr('class') );
       prevli.children('a').addClass( prevli.children('a').attr('href').replace('#','') );
       lastli = prevli;
     }

実際のデモを見る

于 2012-10-31T08:57:32.410 に答える
0 
$('li').each(function(){
    var $activeLI = $(this);
    $activeLI.addClass($activeLI.find('a').attr('href').substring(1));

    $activeLI.nextAll('li').each(function() {
        $activeLI.addClass($(this).find('a').attr('href').substring(1))
    });
});​

デモ

于 2012-10-31T08:52:30.657 に答える
0

もう 1 つのバリアント:

function setClasses() {
    var className = "";
    $.each($("li > a").get().reverse(), function(index, item) {
        className += $(item).attr("href").replace(/^#/, "") + " ";
        $(item).addClass(className);        
    });
}

setClasses();

ここで試してみてください。

于 2012-10-31T09:01:13.227 に答える