5

これは私がこれまでに持っているものです:

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

}

私がやろうとしているのは、CSSスタイルを特定のliに追加して、それをn番目の子の位置で呼び出すことです。したがって、私が試したのはこれでした:

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

もちろん、それはうまくいきませんでした。私は初心者なので、私のコードは非常に非効率的かもしれませんが、今は心配していません。レストラン[i] ['nombre']に応じて、各liに異なる行の高さを追加したいのです。長さ。

4

4 に答える 4

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

これは、文字列を数値に追加しよi==1うi+1と2すると、両方が暗黙的な型変換で文字列に変換されるためです。したがって、数値部分を最初に評価するように強制します。i+111

于 2013-07-06T23:05:28.537 に答える
1

ロジックを変更してline-height、サイクルの各反復にを割り当てることができます。

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);
        }
    }
}
于 2013-07-06T23:14:53.010 に答える