Javascript, фильтр данных при загрузке документа

Question

У меня есть сайт, где некоторые divs сортируются через фильтры данных.

<li><a href="#" class="active" data-filter=".xyz">XYZ</a></li> 

Теперь при загрузке документа отображаются все div. Как я могу достичь этого, что появляется только div с классом «xyz»?

Надеюсь, что кто-то может мне помочь, на самом деле не получилось прямо сейчас.

Редактировать: Извините, что вы вводите так мало кода.

<ul class="filter"> 
    <li><a href="#" class="active" data-filter=".nature">Nature</a></li> 
    <li><a href="#" data-filter=".logo">Logo</a></li> 
    <li><a href="#" data-filter=".brochures">Brochures</a></li> 
    <li><a href="#" data-filter=".business-card">Business Card</a></li> 
</ul> 
<div class="nature">...</div> 
<div class="logo">...</div> 

Теперь каждый div отображается на pageload. Мне бы хотелось показать только первый div (.nature). Фильтрация выполняется Я бы предположил, что jquery.

Answer 1

Я нашел решение. Я только сделал Google ложные вещи. Решение было прямо здесь. How to activate JS data-filter when page loads? Спасибо вам всем за ваши ответы!

Answer 2

Предполагая, что «показать» вы имеете в виду дисплей, вы можете контролировать это с помощью CSS:

[data-filter = '.xyz'] { 
    display: none; 
} 

Это будет соответствовать всем элементам, которые имеют атрибут называется data-filter с точным значением .xyz. Если вы собираетесь использовать этот атрибут так же, как атрибут class, где классы разделены пробелами, вы можете использовать селектор |= атрибута вместо:

[data-filter ~= '.xyz'] { 
    display: none; 
} 

Здесь вы можете увидеть его в working demo.

Надеюсь, это поможет!

Answer 3

Если я правильно понял, вам нужно скрыть любой элемент, имеющий значение атрибута data-filter (селектор CSS), который не соответствует элементу, на котором включен атрибут?

Вы могли бы сделать что-то вроде этого:

HTML

<div class="xyz" data-filter=".xyz">should show</div> 
<div class="no-xyz" data-filter=".xyz">should not show</div> 
<div class="no-xyz" data-filter=".xyz">should not show</div> 

JS

window.onload = function() { 
    var filteredEls = document.querySelectorAll('[data-filter]'), 
     i = 0, 
     len = filteredEls.length, 
     frag = document.createDocumentFragment(), 
     el, elClone; 

    for (; i < len; i++) { 
     el = filteredEls[i]; 

     elClone = el.cloneNode(false); 

     frag.appendChild(elClone); 

     if (!frag.querySelector(el.getAttribute('data-filter'))) { 
      el.style.display = 'none'; 
     } 

     frag.removeChild(elClone); 
    } 

}; 

EDIT: Похоже, вы редактировали этот вопрос, и я понял это в первый раз.

Если вы используете jQuery и уже имеете плагин, который выполняет фильтрацию, когда вы нажимаете на эти элементы фильтра, но плагин сначала не скрывает никаких элементов, возможно, вы просто можете вызвать событие click на начальном фильтре ,

$(function() { 
    $('ul.filter li:first-child > a').trigger('click'); 
});