JavaScript Filterung durch den Vergleich zweier Arrays

Question

Das DOM:

<div class='myDiv' data-catid='1,2,3'></div> 
<div class='myDiv' data-catid='4,5'></div> 
<div class='myDiv' data-catid='1,5,7'></div> 
<div class='myDiv' data-catid='8,9'></div> 
<div class='myDiv' data-catid='2,3,4'></div> 

Die JS:

var filters = [2, 4]; 

Ich möchte Schleife durch die divs, und die, die sich verstecken, die nicht beide der Kategorie hat IDs in ihren data-catid.

Ich habe dies bisher:

$('.myDiv').each(function(i, el){    

    var itemCategories = $(el).data('catId').split(','); 

    // Do check and then hide with $(el).css('visibility', 'hidden') 
    // if doesn't contain both filter id's in 'itemCategories'; 

}); 

Answer 1

Verwendung filter() Methode zusammen mit Javascript Array#every Methode (oder Array#some Verfahren verwendet werden kann).

var filters = [2, 4]; 
 

 
// get all elements with class `myDiv` 
 
$('.myDiv') 
 
    // filter out elements 
 
    .filter(function() { 
 
    // generate array from catid attribute 
 
    var arr = $(this) 
 
     // get data attribute value 
 
     .data('catid') 
 
     // split based on `,` 
 
     .split(',') 
 
     // parse the string array, it's optional 
 
     // if you are not parsing then convert Number to 
 
     // String while using with indexOf 
 
     .map(Number); 
 
    // check all catid presents 
 
    return !filters.every(function(v) { 
 
     // check index of elements 
 
     return arr.indexOf(v) > -1; 
 
    }); 
 
    // or with `some` method 
 
    // return filters.some(function(v) { return arr.indexOf(v) === -1; }); 
 
    // hide the elements 
 
    }).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='myDiv' data-catid='1,2,3'>1</div> 
 
<div class='myDiv' data-catid='4,5'>2</div> 
 
<div class='myDiv' data-catid='1,5,7'>3</div> 
 
<div class='myDiv' data-catid='8,9'>4</div> 
 
<div class='myDiv' data-catid='2,3,4'>5</div>

---

FYI: Für älteren Browsercheck polyfill option of every method.

Answer 2

Sie können jquery .filter() anstatt .each() zum Filtern des ausgewählten Elements verwenden und String.prototype.indexOf() verwenden, um den Wert im Array zu überprüfen.

var filters = [2, 4]; 
 
$('.myDiv').filter(function(){    
 
    var num = $(this).data('catid').split(',').map(Number); 
 
    return num.indexOf(filters[0]) == -1 || num.indexOf(filters[1]) == -1 
 
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='myDiv' data-catid='1,2,3'>1</div> 
 
<div class='myDiv' data-catid='4,5'>2</div> 
 
<div class='myDiv' data-catid='1,5,7'>3</div> 
 
<div class='myDiv' data-catid='8,9'>4</div> 
 
<div class='myDiv' data-catid='2,3,4'>5</div>