Изменение CSS на нескольких Javascript-переменных

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

Но в последнее время я слушал профессиональный жаргон Podcast, в течение которого они упоминали, что это лучшая идея, чтобы назначить все ваши 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 на одном и том же элементе ...

Я уверен, что есть что-то простое, что я забыл об этом, спасибо!

Answer 1

простое решение:

Если у вас есть уже несколько переменных определены, вы можете select them all with a jQuery selector function, а затем просто выполнить CSS на этом один селектор:

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

Update: Под редакцией выше exaple работать. Необходимо перебрать это с помощью функции each().

---

Альтернативное решение:

Если у вас есть к подобной операции несколько раз, либо:

1. Выберите все элементы в единую переменную JQuery, как говорят другие ответы (негибкое решение).
2. Добавить общий класс ко всем переменным, а затем работать с этим классом (динамическое решение).

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

Дело в том, что вы должны уменьшите количество внутренних запросов, потому что они «стоят». Но логика так же:

вместо

$("#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'}); 

пожалуйста рассмотрите также использование более простого запроса, например, общее имя класса, а не все эти различные идентификаторы, если возможно кий. Это более читаемо и эффективно.

Answer 4

они отметили, что это лучшая идея, чтобы назначить все ваши DOM-запросов к переменным в начале вашего файла JavaScript

Более точно, это хорошая идея, чтобы кэшировать запросы документов в область инициализации вашего кода.

Разница тонкая. Также ваш вопрос почти звучит так, будто вы кэшируете каждый элемент по отдельности в переменных - вам не нужно это делать. Вы можете «кэшировать» набор результатов jQuery, просто назначив ему переменную, а затем вы можете повторно использовать это, если структура вашего документа остается прежней.

jQuery по-прежнему необходимо обновить DOM, чтобы изменить CSS, разница в том, что ему не придется снова искать эти элементы, если вы работаете с кешированной переменной. В этом случае нет необходимости работать с элементами отдельно, jQuery будет обрабатывать это для вас.

Все ваши элементы ссылаются на id, поэтому поиск будет довольно быстрым в любом случае. Беспокойство о том, что ваш код делает логический смысл, прежде чем оптимизировать слишком много.

Answer 5

Получил это от работы, главным образом, от ответа Джонатана Лама. Вот что работает для меня:

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

Answer 6

JQuery будет по-прежнему использовать цикл, чтобы установить встроенные стили на всех элементах, что часть неизбежно. Как вы и другие упомянули, вы можете получить лучшую производительность путем кэширования поисковых запросов, хотя в этом случае это поисковые запросы, которые уже достаточно быстрые - $("#hello") намного быстрее, чем $(".hello"). Что вы можете сделать, хотя есть, если это возможно, избегать использования встроенных стилей, как в вашем примере и создать класс, который вы добавляете/удалить для всех согласующих элементов:

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