Question

这是我到目前为止所做的：

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个孩子位置来调用它来为一个精彩的li添加一个css样式，所以我尝试的是这个：

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

当然没有用。我是初学者，所以我的代码可能效率很低，但我现在并不担心，我想要的是根据restaurantes [i] ['nombre']为每个li添加不同的行高。长度。

Answer 1

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

如果i==1现在i+1为2，那么使用您的解决方案，您将获得i+1 11，这是因为当您尝试添加时将两者都编号的字符串转换为具有隐式类型转换的字符串。因此，强制它首先评估数字部分。

Answer 2

我建议您使用jquery .eq方法获取nth-child的eqvivalent，然后使用.find方法匹配，而不是通过将位附加在一起来构建选择器字符串。选择器的其余部分。

这样的事情：

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

Answer 3

您可以更改逻辑并在周期的每次迭代中分配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);
        }
    }
}

Answer 4

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

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

在元素名称上使用iterator变量？

4 个答案: