更改多个 Javascript 变量的 CSS答案

【问题标题】：Change CSS on Multiple Javascript Variables更改多个 Javascript 变量的 CSS
【发布时间】：2016-07-24 22:05:41
【问题描述】：

大家快速提问。我知道您可以使用 jQuery 选择多个元素并在一行代码中更改 CSS 属性，如下所示：

        $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2").css({ 'position' : 'absolute', 'opacity' : '0'});

但最近我在收听 ShopTalk 播客，其中他们提到最好将所有 DOM 查找分配给 Javascript 文件开头的变量，然后在整个文件中使用该变量。我这样做了，但是当我需要更改所有这些元素的 CSS 时，我意识到除了为每个元素编写一行之外，我想不出其他方法来做到这一点，就像这样：

    n2.css({ 'position' : 'absolute', 'opacity' : '0'});
    n3.css({ 'position' : 'absolute', 'opacity' : '0'});
    n4.css({ 'position' : 'absolute', 'opacity' : '0'});
    n5.css({ 'position' : 'absolute', 'opacity' : '0'});
    n6.css({ 'position' : 'absolute', 'opacity' : '0'});

有没有更简洁的方法来改变所有这些变量的 css 等效于单行 jQuery 方式？我猜我可以创建一个数组并遍历它们，但这几乎破坏了不在同一个项目上执行多个 DOM 查找的性能点......

我确定我忘记了一些简单的事情，谢谢！

【问题讨论】：

也许他们并不意味着将所有不同的元素单独分配给单独的变量。根据您的预期用途，它应该比这更灵活。因此，如果您想稍后将它们作为一个组进行操作（尤其是如果您想在脚本期间多次执行此操作），则可以在开头分配一个包含所有这些元素的变量

标签： javascript jquery html css performance

【解决方案1】：

简单的解决方案：

如果你已经定义了多个变量，你可以select them all with a jQuery selector function，然后在那个选择器上执行CSS：

$([ n2, n3, n4, n5, n6 ]).each(function() {
    $(this).css({ 'position' : 'absolute', 'opacity' : '0'});
});

更新：在上面进行了编辑以正常工作。必须使用 each() 函数对其进行迭代。

替代解决方案：

如果您必须多次执行类似的操作，则：

像其他答案所说的那样，将所有元素选择到一个 jQuery 变量中（不灵活的解决方案）。
为所有变量添加一个公共类，然后对该类进行操作（动态解决方案）。

【讨论】：

所以我尝试了你的示例，但直到我先做了一个 .each() ，然后在函数内部做了一个 $(this).css() ，它才起作用。
@JakeEvans 如果这解决了您的问题，请考虑接受向社区展示它的帮助！

【解决方案2】：

他们的意思可能是这样，你使用变量example 来存储查询，然后在你需要的地方使用它，所以代码会是这样的：

var example = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")

 // when you need to change props of elements selected by query in example you use : 

 example.css({ 'position' : 'absolute', 'opacity' : '0'});

【讨论】：

您会看到它后面的文本，将所有 DOM 查找分配给一个变量，然后改用该变量。这正是他们在谈论的内容，而不是将其拆分为每个 custom-*-*-* 的变量 :)

【解决方案3】：

他们提到最好将所有 DOM 查找分配给 Javascript 文件开头的变量

更准确地说，最好将文档查询缓存在代码的初始化区域中。

区别很微妙。此外，您的问题几乎听起来像是您将每个元素单独缓存在变量中 - 没有必要这样做。您可以通过将 jQuery 结果集分配给一个变量来“缓存”它，然后只要文档的结构保持不变，您就可以重复使用它。

jQuery 仍然需要更新 DOM 来改变 CSS，不同的是，如果你对缓存的变量进行操作，它就不必再次搜索这些元素。在这种情况下，无需单独对元素进行操作，jQuery 会为您处理。

您的所有元素都由 id 引用，因此无论如何查找都会非常快。在优化太多之前，请担心您的代码是否符合逻辑。

【讨论】：

感谢细致入微的解释。知道为什么按 ID 选择非常快吗？按类查找是否显着变慢？
按 id 查找通常更快，因为它是唯一标识符，并且可以针对编译器的搜索进行优化。在内部，jQuery 通常使用浏览器原生 getElementById()，而不是较慢的 CSS 样式选择器查询查找。现代浏览器进行这些搜索的速度非常快，但 #id 是最快的。类查找速度较慢有几个原因 - 它们可以返回许多结果，但在小型应用程序中它们无需担心。

【解决方案4】：

这主要归功于 Jonathan Lam 的回复。这对我有用：

$([ n2, n3, n4, n5, n6 ]).each(function() {
        $(this).css({ 'position' : 'absolute', 'opacity' : '0'});
});

【讨论】：

【解决方案5】：

关键是您必须减少 dom 查询的数量，因为它们“成本”。但逻辑是一样的：

而不是

$("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")
    .css({ 'position' : 'absolute', 'opacity' : '0'});

做

var elements = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")

在代码的开头并在需要时使用该变量：

elements.css({ 'position' : 'absolute', 'opacity' : '0'});

如果可能，请考虑使用更简单的查询，例如通用类名，而不是所有不同的 id。它更具可读性和效率。

【讨论】：

【解决方案6】：

jQuery 仍然会使用 for 循环来设置所有元素的内联样式，这部分是不可避免的。正如您和其他人所提到的，您可以通过缓存查找来获得更好的性能，尽管在这种情况下，这些是 ID 查找，已经非常快 - $("#hello") 比 $(".hello") 快得多。但是，您可以做的是，如果可能，请避免使用示例中的内联样式，并创建一个可以添加/删除到所有匹配元素的类：

$("#hello1, #hello2, #hello3").addClass("invisible")

【讨论】：