Question

I was wondering how to achieve something like this using 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>

If I have only this:

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

So, basically I want that each list item is looking for its sibling’s ID and add them by order as class. First list item has 3 siblings, and by that it must have 4 classes (his own and 3 from siblings) and so on … I hope that I explained it well… TNX!

Answer 1

Try this

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

I know there could be more efficient and better solutions too. But this one is running fine for me without any bug, Worth a try.