0

我需要动态地对元素应用一些样式.child-1并.child-2添加 CSS 类。

我应该将它们添加一次#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.

谢谢你的建议！

4

1 回答 1

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 级联应用到缩小的DOM 子树中的元素的位置#parent

为了解决@tMagwell 提出的关于重绘的问题，#large-container这是另一种应用 css 的优化方式：

// 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');

这段代码当然假设只有child-1和child-2 .. 如果你有child-3，child-4 .. child-n并且只想将它应用到child-n .. 那么你可以使用 child1element.siblings()[n] // 其中 n 是您要定位的孩子的索引，因为兄弟姐妹（）返回一个数组

希望这可以帮助！

更新：

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

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

答案是肯定的。让我给你一个肯定会发生的场景：

CSS：

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

html:

<div id="parent">
    <div id="child-1"></div>       
    <div id="child-2"></div>
    <div id="large-container">
      <!-- images etc -->
      <p>hello world!<p>
       <!-- many more p tags that has a lot of text and stuff -->
    </div>
</div>

所以在这个例子中..font-size:10pt放置在下面#parent .class1 .class2肯定会影响#large-container..的内容并且操作会花费一些东西..我无法量化它有多昂贵（这将取决于浏览器渲染引擎等）..但足够了说有一些成本 x 高于如果您不只是将 class1 和 class2 添加到父 div。

于 2013-02-09T08:41:54.127 回答