Question

快速提问大家。我知道您可以使用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 Podcast，在此期间他们提到在Javascript文件的开头将所有DOM查找分配给变量更好，然后在整个文件中使用该变量。我这样做了，但是当我到达需要更改所有这些元素的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查找的性能点......

我确定有一些简单的事我忘记了这一点，谢谢！

Answer 1

简易解决方案：

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

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

更新：编辑上面的exaple工作。必须使用each()函数迭代它。

替代解决方案：

如果你需要多次进行类似的操作，请：

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

Answer 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'});

Answer 3

他们提到将所有DOM查找分配到Javascript文件开头的变量是个更好的主意

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

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

jQuery仍然需要更新DOM来改变CSS，区别在于如果你对缓存变量进行操作，它将不必再次搜索这些元素。在这种情况下，没有必要单独操作元素，jQuery将为您处理。

所有元素都由id引用，因此无论如何查找都会非常快。在优化太多之前担心你的代码具有逻辑意义。

Answer 4

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

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

Answer 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'});

DO

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。它更具可读性和效率。

Answer 6

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

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

在多个Javascript变量上更改CSS

6 个答案: