Question

基于另一个地雷问题的答案（这个：How to make children auto fit parent's width only with CSS?），我在想什么是解决性能问题的最佳jQuery方法。

第1块：在需要时找到所有DOM元素：

$("div.parent a").css("width", $("div.parent").width() / $("div.parent a").length - 2);

第2块：只查找DOM子项，使用each（），parent（）和siblings（）：

$("div.parent a").each(function() {
    $(this).css("width", $(this).parent().width() / $(this).siblings().length - 2);
});

第3块：首先找到DOM父级，使用each（）并根据上下文查找子级：

$("div.parent").each(function() {
    $("a", this).css("width", $(this).width() / $("a", this).length - 2);
});

如果有人想测试，这是小提琴：http://jsfiddle.net/ErickPetru/6nSEj/3/

那么，哪个街区更好？为什么？

Answer 1

我会预先查询元素，如下所示：

// find the elements you want to resize
var $links = $("div.parent a");

// resize them, and use the parent width
$links.width($links.parent().width() / $links.length - 2);

这样，您只需查看一次链接，并查找父级。没有循环，也没有多余的查询。

以下是一个例子：

http://jsfiddle.net/xixionia/Gsek5/

Answer 2

使用FireBug profiling：

第1块：8.466毫秒，372个电话
第2块：10.130毫秒，526个电话
第3块：8.560毫秒，383个电话

xixonia的回答也是最快的

xixonia：8.205 ms，369个电话

按速度顺序：

xixonia的
第1块
第3块

甚至不会使用第2块

Answer 3

我会说Block 1会是最好的，因为不需要循环，

你也可以试试这个：

$("div.parent a").css({
    width: $(this).parent().width() / $(this).siblings().length - 2)
});

在父DIV宽度上自动调整孩子的哪种方法更好？

3 个答案: