Как применить метод сразу к двум переменным JQuery?

Question

[Nikita]

Вопрос такой, есть две переменные

var $name = $('#usrname'),
    $email = $('#email');

При определенных условиях мне нужно к ним применить .hide() и вариант ниже мне не очень нравится:

$name.hide()
$email.hide()

Объединять эти переменные через .add() нельзя, либо льзя, но нужно положить в третью переменную чего тоже не хочется.
Можно ли решить такую проблему?

Answer 1

[A K]

Если исходить из вашего условия, задача решается таким образом:

[$name,$email].map(function(item) {
     item.hide();
})

Comments

[Nikita]

Да такой вариант рассматривал только через $.each()

Answer 2

[Виталий Инчин ☢]

А можно еще так:

$.merge($name, $email).hide();

Но нету ничего короче и красивее, чем:

$name.add($email).hide()

Comments

[Nikita]

Второй вараинт не подходит, тк переменная $name используется потом, а после add там будет не один элемент, а два. А вот первый вариант мне понравился, сейчас почитаю что это за метод :)

[Виталий Инчин ☢]

Nikita: ошибаетесь на счет add!

var bd = $("body"), bdh = bd.add($("head"));
console.log(bd, bdh); //В первом только body, во втором body и head

[Nikita]

Действительно, .add() возвращает новый набор, исходные оставляет без изменений. Причем в третью переменную даже укладывать не нужно. Но оно немного не подходит визуально, т.к. полей у меня не дава а 10 и комплектов этих полей может где по два, где по три, а где и все пять. Вариант с add() подходит, т.к. работает но для читабельности больше подойдет если переменных 2-3 и одна из них обязательна.

Для своего примере остановился на .merge().

Answer 3

[Sergey Lysogor]

В вашем случае - best practice будет $('#usrname, #email').hide()

Подробнее здесь: https://api.jquery.com/multiple-selector/

Был рад помочь :)

Comments

[Nikita]

Мне кажется это будет не бестпрактикс, дело в том что у меня уже есть два набора элеметов завернутых в JQuery объект. Т.е. они уже закешированны, зачем делать выборку снова?

Answer 4

[Сергей Горячев]

Я не сильно спец, а не прокатит так?

var $form = $('#usrname, #email')
$form.hide()

Comments

[Александр Зачиналов]

прокатит, но можно писать и без создания переменной: $('#usrname, #email').hide()

[Александр Зачиналов]

точнее даже нужно)

[Сергей Горячев]

Александр Зачиналов: Ну, это понятно, я ответил именно исходя из кода представленного.

[Nikita]

Зачем делать выборку повторно при наличии уже закешированных объектов?

[Сергей Горячев]

Nikita: Я же сразу сказал, я не спец. Не претендую на качество ответа.

Answer 5

[Алексей Царапкин]

А прописать одинаковый класс на элементах и сделать так?
$(".classname").hide();

Comments

[Sergey Lysogor]

Не знаю, у кого, как, но у меня использование классов для унификации элементов вызывает легкую путаницу, вплоть до отвращения. Это неловкое чувство, когда разбираешься в чужом коде, находишь глазами нужный элемент с пачкой классов и думаешь первую мысль - они все стилизуют или кто-то унифицирует?
Я за data-* и id!

[Алексей Царапкин]

Сергей Гордеев: А firebug же у нас не придумали чтобы проверить стилизируют ли что-либо классы или нет. Не страдайте перфекционизмом.

[Nikita]

Такйо вариант я рассматривал. Пример был отдален от действительности, в реальности у меня есть 10 полей и в зависимости от варианта выбранного в первом поле (select) мне нужно какие-то поля скрывать, а какие показывать.

[Sergey Lysogor]

Алексей Царапкин: Тут не перфекционизм, а стандарты.
www.w3.org/TR/html401/struct/global.html#h-7.5.2 - посмотрите. Про ID явно написано что он предназначен для с связывания/ссылок на части DOM в скриптах, а про class - такого нет.
К тому же если firebug помогает ориентироваться среди классов пустышек еще не означает, что этот подход правильный.

[Алексей Царапкин]

Сергей Гордеев: Хорошо, зачем тогда в jQuery существуют селекторы по классам? Зачем в js существует функция getByClass??? Намеренное нарушение стандартов и ввод разработчиков в заблуждение? Это именно перфекционизм.