CODEWITHSUNDEEP
javascriptjquery
styler
styler

Reputation: 16491

Hide all elements who's status isn't part of a filterable array?

I want to hide all elements who's status doesn't exist with in a filterable array and was wondering what the most performant method would be to achieve this? Right now I filter the elements, check the status, check if it doesn't exist in the filter array then apply a hidden class. Is there a better way to do this?

JS

var filtersArray = ['working', 'rejected'],
        orders = $('.js-orders').children();

var filtered = orders.filter(function(index, element) {
    var status = $(element).data('status').toLowerCase(),
        hiddenFilter = !_.contains(filtersArray, status);

    return hiddenFilter;
});

filtered.addClass('is-hidden');

JS Fiddle https://jsfiddle.net/kyllle/xwobhnzr/

Upvotes: 0

Views: 30

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

The test inside the filter function is:

filtersArray.indexOf($(element).data('status').toLowerCase()) != -1


$(function () {
  var filtersArray = ['working', 'rejected'],
      orders = $('.js-orders').children();

  var filtered = orders.filter(function(index, element) {
    return filtersArray.indexOf($(element).data('status').toLowerCase()) != -1
  });

  filtered.addClass('is-hidden');
});
.is-hidden {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<ul class="js-orders">
    <li data-status="working">Item 1 - Working</li>
    <li data-status="pending">Item 2 - Pending</li>
    <li data-status="working">Item 3 - Working</li>
    <li data-status="pending">Item 4 - Pending</li>
    <li data-status="working">Item 5 - Working</li>
    <li data-status="pending">Item 6 - Pending</li>
    <li data-status="rejected">Item 7 - Rejected</li>
    <li data-status="rejected">Item 8 - Rejected</li>
</ul>

Upvotes: 1

Related Questions