Как отобразить только нужные элементы?

Question

[denis_druid]

Всем привет. Прошу помощи!
Есть большой массив строк, который выводится. И в некоторых строках прописаны классы.
Например:

<h3 class='random_1'>Строка 1</h3>
<h3 class='random_3'>Строка 2</h3>
<h3 class='random_2'>Строка 3</h3>
<h3 class='random_1'>Строка 4</h3>
<h3 class=''>Строка 5</h3>
<h3 class='random_2'>Строка 6</h3>
<h3 class=''>Строка 7</h3>
<h3 class='random_3'>Строка 8</h3>
<h3 class=''>Строка 9</h3>
<h3 class='random_3'>Строка 10</h3>

И есть кнопки для сортировки этих строк:

<a href='#'>Show all</a> | <a href='#'>rand_1</a> | <a href='#'>rand_2</a> | <a href='#'>rand_3</a>

Помогите с кодом на JS или JQuery, чтобы это всё заработало и засортировало ))

Answer 1

[Евгений]

Comments

[denis_druid]

Добрый день. Ваш пример работает идеально. Подскажите, куда и в каком виде вставить JS код? Кроме обрамления в

[denis_druid]

Ответ автора:

Попробуйте обернуть код js

$(document).ready(function () {
 var items = $('h3');
    $('a').on('click', function() {
    var sort = $(this).data('sort');
      if (sort !== 'all') {
      items.hide();
        $('.'+ sort).show();
      } else {
      items.show();
      }
    return false;
    });
});