Verwenden Sie die Iteratorvariable für den Elementnamen?

Question

Das ist, was ich bisher habe:

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

}

Was ich versuche zu tun, indem sie nannte es eine CSS-Stil zu einem sprecific li hinzuzufügen, indem er die Position der n-ten Kind ist, so was ich probierte war das:

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

Natürlich hat das nicht funktioniert. Ich bin ein Anfänger, also kann mein Code sehr ineffizient sein, aber ich mache mir im Moment keine Sorgen darüber, was ich will, ist eine andere Linienhöhe zu jedem li hinzuzufügen, abhängig von restaurantes [i] ['nombre']. Länge.

Answer 1

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

wenn i==1 Sie i+1 als 2 jetzt bekommen, mit Ihrer Lösung Sie i+1 als 11 erhalten wird, ist dies, weil, wenn Sie versuchen, eine Zeichenfolge hinzuzufügen, sowohl in Strings mit impliziten Typumwandlung umgewandelt zu nummerieren sind. Also zwinge es, zuerst den Zahlenteil auszuwerten.

Answer 2

Sie waren in der Nähe. Versuchen Sie es mit der: n-of-Typselektor, so dass Sie nur zählen durch die li-Elemente eher als alle Elemente:

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

Answer 3

Anstatt den Aufbau der Selektor-String von Bits zusammen anhängt, würde ich vorschlagen, dass Sie die jquery verwenden .eq Methode, um das eqvivalent des nth-child zu erhalten, und verwenden Sie dann die Methode .find, um den Rest des Selektors abzugleichen.

Etwas wie folgt aus:

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

Answer 4

Sie Ihre Logik ändern könnte und weisen Sie die line-height bei jeder Iteration des Zyklus:

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