Użyj zmiennej iteratora dla nazwy elementu?

Question

To, co mam do tej pory:

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

}

co próbuję zrobić, to dodać styl css do li sprecific nazywając go przez to pozycja nth-child, tak co próbowałem to:

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

Oczywiście to nie zadziałało. Jestem początkującym, więc mój kod może być bardzo nieefektywny, ale nie martwię się o to teraz, chcę dodać różną wysokość linii do każdego li w zależności od restauracji [i] ['nombre']. długość.

Answer 1

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

jeśli i==1 masz i+1 jak 2 teraz, z rozwiązania dostaniesz i+1 jako 11, to dlatego, że gdy spróbujesz dodać ciąg na numer oba są konwertowane na ciągi znaków z niejawna konwersja typu. Więc zmuś go, aby najpierw ocenić część liczbową.

Answer 2

byłeś blisko. Spróbuj użyć: selektor nth-of-type więc liczą tylko przez elementy li zamiast wszystkich elementów:

$("#col_derecha li:nth-of-type(" + i + ")").addClass("mediumHeight"); 

Answer 3

Zamiast budować ciąg selektora przez dodanie bitów razem, proponuję użyć jQuery .eq metoda uzyskania równoważności n-tego dziecka, a następnie użyj metody .find, aby dopasować resztę selektora.

coś takiego:

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

Answer 4

Można zmienić logikę i przypisać line-height na każdej iteracji cyklu:

function listarRestaurantes() { 
    for (i = 0; i < restaurantes.length; i++) { 
     var restaurantes_len = restaurantes[i]['nombre'].length; 
     var nombre_res_height = 0; 
     if (restaurantes_len >= 0 && restaurantes <= 11) { 
      nombre_res_height = '140px'; 
     } else if (restaurantes_len > 11 && restaurantes_len <= 20) { 
     nombre_res_height = '100px'; 
     } else if (restaurantes_len > 20 && restaurantes_len <= 30) { 
      nombre_res_height = '60px'; 
     } 

     if(nombre_res_height){ 
      $("#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).find('.nombre_res').css('line_height',nombre_res_height); 
     } 
    } 
}