Question

如果我有很多关注div s：

<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
<div class="error"> </div>
...

一次隐藏它们的最佳方法（和最佳做法）是什么？

$('.error').hide()或

.addClass('hide')包括.hide { display: none; }？

Answer 1

你选择哪个并不重要。如果这对您来说很重要，请运行基准。

浏览器的大部分时间都是处理布局和重新绘制，添加类或内联样式（因为这是.hide()所做的，将style="display: none;添加到元素中）实际上无关紧要方式。

如果您关心性能，请删除jQuery，开始使用 vanilla JS ，了解 page performance 并优化您的JavaScript和CSS选择器。

老实说，你如何修改DOM是你应该担心的最后一件事：）

Answer 2

最好是一个意见，你可以运行jsperf测试，每个浏览器都会有所不同。

最后，您将循环使用JavaScript并添加类或设置样式属性，或者只依靠CSS为您进行循环。

使用选择器

$(".error").hide();  // or .addClass() or .css("display","none")

在幕后，它确实：

一个或多个元素的DOM查找
它正在对集合进行for循环
它获取循环迭代中的当前元素
在循环迭代中应用css规则
结束重绘/重绘

但是，不必循环的一种方法是仅依靠在层次结构中添加更高的CSS规则。

CSS：

.hideErrors div.error {
    display: none;
}

JavaScript的：

$(document.body).addClass("hideErrors");

这是做什么的：

一个元素的DOM查找
添加一个类
结束重绘/重绘

这样您就不必遍历并为每个元素添加一个类。最好将“hideError”规则放在包装错误列表的元素周围。所以将“body”更改为该父元素。

Answer 3

“最佳”一词并不是真正足够的信息，因为它可能意味着性能（速度）或大小（包括库）。

如果您已经在使用JQuery，它通常是一个非常高效的库，以下是在DOM完成加载后如何做到这一点。

$( document ).ready(function() {
    $('.error').hide()
});

除了＆＃DOM; DOM准备好之外还有其他活动。 JQuery定义了你可以将动作挂钩，这就是为什么它是一个方便的库。

如果您只对整体速度感兴趣并且想要避免使用外部库，那么CSS通常是您最快的方式，您可以按照样式表中的说明添加类。这可以限制何时可以在DOM加载之前隐藏它们。

您所描述的所有情况都有最好和最坏的情况。 Javascript必须通过DOM循环（解析），因此它总是比纯CSS慢。

Answer 4

我认为添加和删除类将是处理此问题的更好方法。

通过这种方式，您还可以执行与错误消息相关的其他样式更改。

  css code : 

   .showdiv {
      display : block;
   }

   .hidediv {
      display:none; 
    }

  javascript code :

   $('.error').addClass('showdiv')  

   $('.error').removeClass('hidediv')

Answer 5

如果您希望隐藏在页面加载中，请在div中添加一个隐藏的类。

.hidden{
    display: none;
}

显示和隐藏只使用jquery。

$('.error').hide();
$('.error').show();

隐藏HTML元素的更好的性能方法是什么？

5 个答案: