Question

我已经编写了这个函数来为不同高度的元素指定行高。是否有任何可能的方法使用for循环？

$(".portfolio-image-overlay").each(function(){
    "use strict"; 
    var height = $(this).siblings("img").height();
    var cheight = $(".item.active> a> img").height();
    $(this).css({"line-height":height+"px"});
    $(this).css({"line-height":cheight+"px"});
});

Answer 1

是的，你可以：

var portfolio = $(".portfolio-image-overlay");
for(var i=0;i < portfolio.length;i++){
   var _this = portfolio.eq(i);
   var height = _this.siblings("img").height();
   var cheight = $(".item.active> a> img").height();
   _this.css({"line-height":height+"px"});
   _this.css({"line-height":cheight+"px"});
}

Answer 2

这实际上是for循环。 .each（）函数循环遍历$（＆＃34; .portfolio-image-overlay＆＃34;）结果集。

你会看到像这样的东西

var resultSet = $(".portfolio-image-overlay");
for (var i = 0; i < resultSet.length; i++) {
    console.log(resultSet[i]);
}

此外，它聪明地将jQuery指针存储在变量中;调用 $（this）三次效率低于

var that = $(this);

并使用了3次。

我看到你也在使用活动项目;

$(".portfolio-image-overlay").each(function(){
    "use strict"; 
    var height = $(this).siblings("img").height();
    var cheight = $(".item.active> a> img").height();
    $(this).css({"line-height":height+"px"});
    $(this).css({"line-height":cheight+"px"});
});

这会更快;

var activeItem = $(".item.active> a> img");
$(".portfolio-image-overlay").each(function(){
    "use strict"; 
    var that = $(this);
    var height = that.siblings("img").height();
    var cheight = activeItem.height();
    that.css({"line-height":height+"px"});
    that.css({"line-height":cheight+"px"}); //Don't know why you're doing this twice, maybe you've CSS animated it so i'll keep it there
});

编辑：

最快就是这样;

var resultSet = $(".portfolio-image-overlay");
var cheight = $(".item.active> a> img").height();
for(var i = 0; i < resultSet.length; i ++){
    var current = resultSet.eq(i);
    var height = current.siblings("img").height();
    current.css({"line-height":height+"px"}).css({"line-height":cheight+"px"});
}

如何使用for循环获得与此.each（）相同的功能？

2 个答案: