Question

我需要通过添加CSS类动态地将一些样式应用于元素.child-1和.child-2。

我应该将它们添加到#parent或每个.child-吗？如果我将其添加到#parent，#large-container的存在是否会影响效果？

<div id="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div id="large-container">
       <!-- a bunch of content here - p tags, images... -->
    </div>
</div>

（.child-1和.child-2是＃large-container顶部的绝对定位元素

$('#parent').addClass('myClass1 myClass2');
vs
$('.child-1, .child2').addClass('myClass1 myClass2');

与CSS相同：

.myClass1 .child-1,
.myClass2 .child-2 {
  color: red;
}
/* vs */
.myClass1.child-1,
.myClass2.child-2 {
  color: blue;
}

myClass1 myClass2仅将样式应用于#child-1和2，它们不会向#large-container添加任何样式。

感谢您的建议！

Answer 1

虽然我认为我的答案无法通过分析器进行验证（在渲染页面等方面是否有任何css / html分析工具？）我将根据我的经验说明：

$('#parent').addClass('myClass1 myClass2');

比

快

$('#child-1, #child2').addClass('myClass1 myClass2');

只是因为你正在遍历dom树而不是两次即 $('#child-1, #child2').addClass('myClass1 myClass2');与

相同

$('#child-1).addClass('myClass1 myClass2');
$('#child-1).addClass('myClass1 myClass2');

理论上证明最后一点想象你的HTML代码看起来像这样：

<div id="parent">
    <div id="child-1"></div>       

    ... lots and lots of html nodes 

    <div id="child-2"></div>

</div>

然后查找#child-1是一个完全独立的操作，而不是查找#child-2 ..当涉及到css / html优化时...最昂贵的操作之一是DOM树遍历。

在$('#parent').addClass('myClass1 myClass2');的情况下，您正在遍历DOM树一次（即找到#parent的位置，然后使用css级联来应用中的元素缩小{ {1}} DOM子树

解决@tMagwell提出的关于重新绘制#parent的问题，这是应用css的另一种优化方式：

#large-container

这段代码当然假设只有 child-1 和 child-2 ..如果你有 child-3 ， child-4 .. child-n ，只想将其应用于 child-n ..然后你可以使用 // store the child-1 node in a variable.. ie whenever you // refer to it in the future.. you won't have to traverse the entire DOM again var child1element = $('#child-1'); $('#child-1).addClass('myClass1 myClass2'); // referring to child1element costs you nothing big, it's already stored in a variable child1element.siblings().addClass('myClass1 myClass2'); //其中n是您要定位的子项的索引，因为siblings()返回一个数组

希望这有帮助！

更新

解决您在评论中提出的这一具体问题：

当我向#parent添加类时，＃large-container的存在是否会减慢？

答案是肯定的。让我给你一个肯定会这样做的场景：

的CSS：

child1element.siblings()[n]

HTML：

#parent .class1 .class2
{
  font-size:10pt;
}

所以在这个示例中..放置在<div id="parent"> <div id="child-1"></div> <div id="child-2"></div> <div id="large-container">  <p>hello world!<p>  </div> </div>下的font-size:10pt肯定会影响#parent .class1 .class2的内容..并且操作会花费一些东西..我无法量化多少钱这是（它将取决于浏览器渲染引擎等）..但足以说明有一些成本x高于你不只是将class1和class2添加到父div。

添加CSS类的性能＆amp;儿童人数

1 个答案: