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 
$('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

你可以这样做：

    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

另一种变体：

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 回答