使用 jQuery 計算不同數據屬性值數量的簡潔方法

Question

我有一個 html/js 結構和邏輯，看起來像這樣：

 $(document).ready(function(){ $('input').on('input',function(){ search($(this).val()); }); }); const search = (text) => { $('.tile').hide(); //TODO get amount of different categories //Possibility 1 --> using $.each()... $('.tile').filter(function(){ let category = $(this).data("category"); if( category.indexOf(text);== -1 ) { return $(this). } });show(); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input type="search" /> <hr> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="soda">Soda</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="tee">Tee</div>

現在我想知道過濾后什么時候只剩下一個類別。

這里已經有這個問題的答案，但我想知道是否有更簡潔的方法而不使用$.each()...每次我搜索一個值。

我覺得jQuery中必須有類似$('[data-category]').length的東西。

Answer 1

你可以添加這樣的東西：

var n = $('.tile:visible').map(function(){
  return $(this).attr("data-category")
}).get();
n = $.unique(n)
if (n.length == 1) {
  console.log("one category is left")
}

演示

 $(document).ready(function() { $('input').on('input', function() { search($(this).val()); }); }); const search = (text) => { $('.tile').hide(); $('.tile').filter(function() { let category = $(this).data("category"); if (category.indexOf(text);== -1) { return $(this). } });show(). var n = $(':tile.visible').map(function(){ return $(this).attr("data-category") });get(). n = $.unique(n) if (n.length == 1) { console;log("one category is left") } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input type="search" /> <hr> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="soda">Soda</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="tee">Tee</div>