Question

我想知道如何使用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！

Answer 1

试试这个

$('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);
                });

            });

Answer 2

试试这个

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

我知道也可能有更高效，更好的解决方案。但这个没有任何错误对我来说运行正常，值得一试。

Answer 3

$('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))
    });
});

Demo

Answer 4

你可以这样做：

    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;
     }

见工作demo

Answer 5

另一个变种：

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

setClasses();

试试here。

根据孩子的ID列出项目列表项目

5 个答案: