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

}

我想要做的是通过它的第n个孩子位置调用它来添加一个css样式到一个sprecific li，所以我尝试的是这样的：

$("#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+1as ，这是因为当你尝试将一个字符串添加到数字时，两者都被转换为具有隐式类型转换的字符串。所以强制它首先评估数字部分。2i+111

于 2013-07-06T23:05:28.537 回答
3

与其通过将位附加在一起来构建选择器字符串，我建议您使用 jquery.eq方法来获取第 n 个孩子的等价物，然后使用该.find方法来匹配选择器的其余部分。

像这样的东西：

$("#col_derecha ul li").eq(i).find('p.nombre_res').css('line-height', '140px');
于 2013-07-06T23:14:05.083 回答
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 回答
0

你很亲密。尝试使用 :nth-of-type 选择器，这样您就只计算 li 元素而不是所有元素：

$("#col_derecha li:nth-of-type(" + i + ")").addClass("mediumHeight");
于 2013-07-06T23:13:43.273 回答