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

Question

[Алексей Орлов]

Мне необходимо чтобы при несовпадении data атрибутов у элемента, он скрывался. Не могу понять в чём ошибка, элементы скрываются сразу все.

<div class="list-item" data-pagereview="mmm" data-pageslug="mmm">1</div>
<div class="list-item" data-pagereview="mmm" data-pageslug="mmm">2</div>
<div class="list-item" data-pagereview="xxx" data-pageslug="mmm">3</div>

var reviewsItems = $('.list-item');
for(i = 0; i < reviewsItems.length; ++i) {
    var elementsByPageReview = reviewsItems[i].getAttribute('data-pagereview');
    var elementsByPageSlug = reviewsItems[i].getAttribute('data-pageslug');
}
    
if (elementsByPageReview !== elementsByPageSlug) {
    reviewsItems.hide();
}

https://codepen.io/smeecy/pen/PoqbJNM

Answer 1

[0xD34F]

О каких элементах и атрибутах идёт речь:

const selector = '.list-item';
const key1 = 'pagereview';
const key2 = 'pageslug';
const attr1 = `data-${key1}`;
const attr2 = `data-${key2}`;

Получаем элементы:

const $elements = $(selector);

// или

const elements = document.querySelectorAll(selector);

Переключаем их видимость:

$elements.show().filter((i, n) => $(n).data(key1) !== $(n).data(key2)).hide();

// или

$elements.each(function() {
  const $this = $(this);
  $this.toggle($this.attr(attr1) === $this.attr(attr2));
});

// или

elements.forEach(n => {
  n.hidden = n.getAttribute(attr1) !== n.getAttribute(attr2);
});

// или

for (const { style, dataset } of elements) {
  style.display = dataset[key1] === dataset[key2] ? 'block' : 'none';
}

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

for (let i = 0; i < elements.length; i++) {
  const { classList: c, attributes: a } = elements[i];
  c.toggle('hidden', a[attr1].value !== a[attr2].value);
}

Answer 2

[SagePtr]

Так вы ко всей коллекции применяете hide, а не к конкретному элементу