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

$('.list-item').filter((i, n) => $(n).data('pagereview') !== $(n).data('pageslug')).hide();

или

$('[data-pageslug]').each(function() {
  const $this = $(this);
  $this.toggle($this.attr('data-pagereview') === $this.attr('data-pageslug'));
});

или

document.querySelectorAll('.list-item').forEach(n => {
  n.hidden = n.getAttribute('data-pagereview') !== n.getAttribute('data-pageslug');
});

или

for (const { style, dataset } of document.getElementsByClassName('list-item')) {
  if (dataset.pagereview !== dataset.pageslug) {
    style.display = 'none';
  }
}

или

.hidden {
  display: none;
}

const items = document.querySelectorAll('[data-pageslug]');
for (let i = 0; i < items.length; i++) {
  const { classList: c, attributes: a } = items[i];
  c.toggle('hidden', a['data-pagereview'].value !== a['data-pageslug'].value);
}

Answer 2

[SagePtr]

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