Use iterator variable on element name?

Question

This is what i have so far:

function listarRestaurantes(){
for(i=0; i<restaurantes.length; i++){
    if(restaurantes[i]['nombre'].length >= 0 && restaurantes[i]['nombre'].length <= 11){
        $("p.nombre_res").css('line-height', '140px');
        $("#col_derecha ul").append("<li class='restaurantes'><div><p class='nombre_res'>" + restaurantes[i]['nombre'] + "</p><p class='vermas'><a href='#'>ver más</a></p></div><img src='img/logos_restaurantes/" + restaurantes[i]['imagen'] + "'/ ></li>").css('opacity',0).animate({opacity:1}, 500);  
    }else if(restaurantes[i]['nombre'].length > 11 && restaurantes[i]['nombre'].length <= 20){
        $("p.nombre_res").css('line-height', '100px');
        $("#col_derecha ul").append("<li class='restaurantes'><div><p class='nombre_res'>" + restaurantes[i]['nombre'] + "</p><p class='vermas'><a href='#'>ver más</a></p></div><img src='img/logos_restaurantes/" + restaurantes[i]['imagen'] + "'/ ></li>").css('opacity',0).animate({opacity:1}, 500);  
    }else if(restaurantes[i]['nombre'].length > 20 && restaurantes[i]['nombre'].length <= 30){
        $("p.nombre_res").css('line-height', '60px');
        $("#col_derecha ul").append("<li class='restaurantes'><div><p class='nombre_res'>" + restaurantes[i]['nombre'] + "</p><p class='vermas'><a href='#'>ver más</a></p></div><img src='img/logos_restaurantes/" + restaurantes[i]['imagen'] + "'/ ></li>").css('opacity',0).animate({opacity:1}, 500);  
    }
}

}

What i'm trying to do is to add a css style to a sprecific li by calling it by it's nth-child position, so what i tryied was this:

$("#col_derecha ul li:nth-child(" + i+1 + ") p.nombre_res").css('line-height', '140px');

Of course that didn't work. I'm a beginner so my code may be very inefficient, but i'm not worried about that right now, what i want is to add a diferent line-height to each li depending on restaurantes[i]['nombre'].length.

Answer 1

"#col_derecha ul li:nth-child(" + (i+1) + ") p.nombre_res"

if i==1 you get i+1 as 2 now, with your solution you will get i+1 as 11, this is because when you try to add a string to number both are converted to strings with implicit type conversion. So force it to evaluate number part first.

Answer 2

Instead of building the selector string by appending bits together, I would suggest you use the jquery .eq method to get the eqvivalent of the nth-child, and then use the .find method to match the rest of the selector.

Something like this:

$("#col_derecha ul li").eq(i).find('p.nombre_res').css('line-height', '140px');