Сохранить оригинальный фильтр данных, нефильтрованный и несортированный

Question

Я пытаюсь сохранить исходное состояние данных в фильтре «все». Содержимое сортируется и фильтруется по атрибуту данных «data-filter». Таким образом, мой вывод будет исходным состоянием без фильтрации и несортировки. Примечание: содержимое div, которое имеет одинаковый «идентификатор данных», будет отображаться только один раз.

Поэтому мой желаемый вывод для фильтра «все» и при первом запуске кода будет:

• контент первый
• контент второй
• контент третий
• контент четвертый

Также для - фильтр «один», выход будет всегда быть «контентом первым», - фильтровать «два», выход будет «контентом вторым», «контентом третьим»… и т. д.

function removeDuplicates() {
  var content = $('.content');
  contentIds = content.map(function() {
    return $(this).data("id");
  }).toArray();
  var newSetContentIds = [...new Set(contentIds)];
  listedContent = $(newSetContentIds).map(function() {
    return $("[data-id=" + this + "]").first()[0];
  });

  listedContent.addClass('listed');
}

$('.filter').click(function() {

  var filterId = $(this).attr('data-filter');

  $('.content').hide();
  $('.content[data-filter=' + filterId + ']').addClass('active').show();

  removeDuplicates();
});

.filter-container {
  display: flex;
}

.filter-container div {
  margin: 10px;
  cursor: pointer;
}

.listed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filter-container">
  <div class="filter" data-filter="all">
    all
  </div>
  <div class="filter" data-filter="1">
    one
  </div>
  <div class="filter" data-filter="2">
    two
  </div>
  <div class="filter" data-filter="3">
    three
  </div>
</div>

<div class="content-container">
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
  <div class="content" data-filter="2" data-id="15">
    content second
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="3" data-id="16">
    content fourth
  </div>
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
</div>

Answer 1

Ваша removeDuplicates функция не работает. Кроме того, он намекнул, что вы хотите запускать эту функцию только при первом нажатии любого из фильтров.

Вместо использования show() и hide(), которые применяют встроенный дисплей, портящийся с классом .listed Вы можете использовать другой класс .hidden, чтобы показать или скрыть элементы div.

Наконец, было неясно, хотите ли вы сортировать один или каждый раз, когда выбранный фильтр не «все». В любом случае, как уже упоминалось, вы можете использовать свойство flex для контейнера и свойство order для div. Он находится внутри removeDuplicates, учитывая, что вы хотите отсортировать div один раз после первого клика.

function removeDuplicates() {

    $(".filter").off("click", removeDuplicates);

    var content = $('.content');
    contentIds = content.map(function() {
        $(this).css('order', $(this).data("filter"));
        return $(this).data("id");
    }).toArray();

    var newContentIds = contentIds.filter((a, i, aa) => aa.indexOf(a) === i && aa.lastIndexOf(a) !== i);
    listedContent = $(newContentIds).map(function() {
        return $("[data-id=" + this + "]")[0];
    });


    listedContent.addClass('listed');
}

$(".filter").on("click", removeDuplicates);

$('.filter').click(function() {

    var filterId = $(this).attr('data-filter');

    if (filterId == "all") {
        $('.content').removeClass('hidden');
        return;
    }

    $('.content').addClass('hidden');
    $('.content[data-filter=' + filterId + ']').addClass('active').removeClass('hidden');
});

.filter-container {
  display: flex;
}

.filter-container div {
  margin: 10px;
  cursor: pointer;
}

.hidden {
  display: none;
}

.content.listed {
  display: none;
}

.content-container {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="filter-container">
  <div class="filter" data-filter="all">
    all
  </div>
  <div class="filter" data-filter="1">
    one
  </div>
  <div class="filter" data-filter="2">
    two
  </div>
  <div class="filter" data-filter="3">
    three
  </div>
</div>

<div class="content-container">
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
  <div class="content" data-filter="2" data-id="15">
    content second
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="2" data-id="17">
    content third
  </div>
  <div class="content" data-filter="3" data-id="16">
    content fourth
  </div>
  <div class="content" data-filter="1" data-id="20">
    content first
  </div>
</div>