Sử dụng biến lặp trên tên phần tử?

Question

Đây là những gì tôi có cho đến nay:

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

}

gì tôi đang cố gắng để làm là thêm một phong cách css đến một li sprecific bằng cách gọi nó bởi đó là vị trí thứ n con, vì vậy những gì tôi đã thử là:

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

Tất nhiên điều đó không hiệu quả. Tôi là người mới bắt đầu nên mã của tôi có thể rất không hiệu quả, nhưng tôi không lo lắng về điều đó ngay bây giờ, những gì tôi muốn là thêm một chiều cao dòng khác nhau cho mỗi li tùy thuộc vào nhà hàng [i] ['nombre']. chiều dài.

Answer 1

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

nếu i==1 bạn nhận được i+1 như 2 bây giờ, với giải pháp của bạn, bạn sẽ nhận được i+1 như 11, đây là bởi vì khi bạn cố gắng thêm một chuỗi lên vị trí số hai được chuyển đổi thành chuỗi với chuyển đổi kiểu ngầm. Vì vậy, buộc nó để đánh giá phần số đầu tiên.

Answer 2

bạn đã thân thiết. Hãy thử sử dụng:-of thứ n-type selector vì vậy bạn chỉ đếm thông qua các yếu tố li chứ không phải là tất cả các yếu tố:

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

Answer 3

Thay vì xây dựng chuỗi selector bằng cách thêm bit với nhau, tôi sẽ đề nghị bạn sử dụng jquery .eq phương pháp để có được eqvivalent của nth-con, và sau đó sử dụng phương pháp .find để phù hợp với phần còn lại của bộ chọn.

Something như thế này:

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

Answer 4

Bạn có thể thay đổi logic của bạn và giao cho line-height trên mỗi lần lặp của chu kỳ:

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