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

Question

[sasha_jarvi]

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

<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/

Answer 1

[0xD34F]

Сложите в массив идентификаторы элементов, которые надо скрыть: 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));
}

Answer 2

[Exploding]

Так?

[data-property-id-row='10'],
[data-property-id-row='15'],
[data-property-id-row='18']{
   display: none;
}

Comments

[sasha_jarvi]

вариант, но лучше бы через js

[Exploding]

sasha_jarvi, Лучше через css, но коль душа желает...

$("[data-property-id-row='10'],
[data-property-id-row='15'],
[data-property-id-row='18']").hide();

Answer 3

[Антон]

Ну и перечислением

var target = 'data-property-id-row';
$('['+ target +'="10"], ['+ target +'="13"], ['+ target +'="15"]').hide();

Answer 4

[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();
		}