[英]JavaScript filtering by comparing two arrays
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>
JS:
var filters = [2, 4];
我想循環遍歷divs
,並隱藏那些在data-catid
中沒有類別ID的那些。
到目前為止我有這個:
$('.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';
});
使用filter()
方法和javascript Array#every
方法(或者可以使用Array#some
方法)。
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>
僅供參考:對於舊瀏覽器,請檢查every
方法的polyfill選項 。
您可以使用jquery .filter()
代替.each()
來過濾所選元素,並使用String.prototype.indexOf()
來檢查數組中是否存在值。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.