Kevin Powell - Community•3mo ago

nth-child, index()

Hello everyone , I have 23 divs each containing 210 spans. When I click on a span with certain number it gets a red outline as a highlighting and I want to copy this outline to all spans with this number in all divs. So far I have this code using nth-child and index(). It works but the problem is that index is 0-based so when I click on a span number 2 I get outline on span number 1. I know there is a trick with adding +1 but I can't figure out how to add it in this specific case. And I don't know if it's even possible. If so I guess it's just a matter of syntaxis I don't know. I will be very happy if anybody can help.

5 Replies

Jiri•3mo ago

Nobody to help..? 🙈

clevermissfox•3mo ago

It would just be index + 1

Jiri•3mo ago

Hello, I didn't noticed you replied to my question, sorry. I suppose it's + 1 trick but as I mentioned I don't know how to insert it in that nth-child statement. Can you give me an example, please?

clevermissfox•3mo ago

I dont know jQuery but I assume you just take the index of the element and add one ?

$(document).ready(function(){
    $(".activelist > span").click(function() {
        var index = $(this).index() + 1; // Add 1 to the index
        $(".ucastsez > .seznamaktiv > span:nth-child(" + index + ")").toggleClass("mojecislo");
    });
});

$(document).ready(function(){
    $(".activelist > span").click(function() {
        var index = $(this).index() + 1; // Add 1 to the index
        $(".ucastsez > .seznamaktiv > span:nth-child(" + index + ")").toggleClass("mojecislo");
    });
});

If you still have a continuing issue please post a link to your live code like a codepen or cosesandbox or scrimba link . For the future, reference #how-to-ask-good-questions ; screenshots are difficult to help debug Also dont forget to add the full stop in front of seznamaktiv if it's a class and not a custom element

Jiri•3mo ago

Okay, I will try your solution and next time I will try a codepen. Thank you and have a nice day. ✌🏼

Gaming

Programming

nth-child, index()