Как наиболее оптимально скрыть элемент с определённым значением 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]

О каких элементах, data-атрибуте и значениях идёт речь:

const selector = '.form-group';
const attr = 'data-property-id-row';
const values = [ 10, 13, 15 ];

Скрываем элементы с указанными значениями:

const elementsToHide = document.querySelectorAll(values
  .map(n => `${selector}[${attr}="${n}"]`)
  .join(', ')
);

for (let i = 0; i < elementsToHide.length; i++) {
  elementsToHide[i].style.transform = 'scale(0)';
}

// или

(function next(i, n = elementsToHide.item(i)) {
  n && (n.style.visibility = 'hidden', next(-~i));
})(0);

Или, кроме скрытия указанных, остальные показываем (если вдруг были скрыты):

const elements = document.querySelectorAll(selector);

for (const n of elements) {
  n.hidden = values.includes(Number(n.attributes[attr].value));
}

// или (в стили надо будет добавить .hidden { display: none; })

elements.forEach(function(n) {
  n.classList.toggle('hidden', this.has(+n.getAttribute(attr)));
}, new Set(values));

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