Задать вопрос
@sasha_jarvi
javascript

Как наиболее оптимально скрыть элемент с определённым значением data-атрибута?

Имеется следующий код:

<div class="form-group customer-field" data-property-id-row="1">1</div>
<div class="form-group customer-field" data-property-id-row="2">2</div>
<div class="form-group customer-field" data-property-id-row="3">3</div>
<div class="form-group customer-field" data-property-id-row="4">4</div>
<div class="form-group customer-field" data-property-id-row="15">15</div>
<div class="form-group customer-field" data-property-id-row="10">10</div>
<div class="form-group customer-field" data-property-id-row="13">13</div>
<div class="form-group customer-field" data-property-id-row="18">18</div>


.form-group {
  border: solid 1px #6c757d;
  padding: 10px;
  margin-bottom: 20px;
}


let customerFields = $('.form-group').toArray();

$.each(customerFields, function(index, field) {
	let idRow = $(field).attr('data-property-id-row');

	if (idRow == "10" || idRow == "13" || idRow == "15") {
		$(field).hide();
	}
});


Здесь скрываются элементы с определенным значением data-property-id-row. В настоящий момент скрытие реализовано через несколько "или". Есть ли более короткий путь реализации скрытия элементов, и если да, то какой?
Работающий образец: https://jsfiddle.net/j0yb3pgu/
  • Вопрос задан
  • 270 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 4
0xD34F
@0xD34F Куратор тега JavaScript
Сложите в массив идентификаторы элементов, которые надо скрыть: const ids = [ 10, 13, 15 ];.

Дальше есть варианты:

$(ids.map(n => `[data-property-id-row="${n}"]`).join(', ')).hide();

или

const elems = document.querySelectorAll(ids.map(n => `[data-property-id-row="${n}"]`));
for (let i = 0; i < elems.length; i++) {
  elems[i].style.display = 'none';
}

или

document.querySelectorAll('.form-group').forEach(function(n) {
  n.hidden = this.has(Number(n.getAttribute('data-property-id-row')));
}, new Set(ids));

или

.hidden {
  display: none;
}

for (const n of document.getElementsByClassName('form-group')) {
  n.classList.toggle('hidden', ids.includes(+n.dataset.propertyIdRow));
}
Ответ написан
Комментировать
Комментировать
Exploding
@Exploding
wtf?
Так?
[data-property-id-row='10'],
[data-property-id-row='15'],
[data-property-id-row='18']{
   display: none;
}
Ответ написан
2 комментария
2 комментария
Eridani
@Eridani
Мимо проходил
Ну и перечислением
var target = 'data-property-id-row';
$('['+ target +'="10"], ['+ target +'="13"], ['+ target +'="15"]').hide();
Ответ написан
Комментировать
Комментировать
@sasha_jarvi Автор вопроса 
let propIdsToHideBlocks = ['10', '13', '15'],
	customerFields = $('.form-group').toArray();

	$.each(customerFields, function(index, field) {
		var idRow = $(field).attr('data-property-id-row');

		if (~propIdsToHideBlocks.indexOf(idRow)) {
			$(field).hide();
		}
	});


Или includes() вместо indexOf(): 

if (propIdsToHideBlocks.includes(idRow)) {
			$(field).hide();
		}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы