Jquery 自訂過濾器

有時候 jquery 的過濾器沒有辦法滿足我們的需求，我們就可以自訂 jquery 的過濾器

DEMO HTML

<ul class="levels">
    <li data-level="1" data-point="1" data-technologies="javascript node grunt">Level 1</li>
    <li data-level="2" data-point="10" data-technologies="php composer">Level 2</li>
    <li data-level="3" data-point="100" data-technologies="jquery requirejs">Level 3</li>
    <li data-level="4" data-point="1000" data-technologies="javascript jquery backbone">Level 4</li>
</ul>

自訂過濾器

以下的程式碼會選出 data-level 大於 2 且 data-point 大於 100 的 jquery 的物件

// requireLevel 就是我們自訂得過濾器
$expr[':'].requireLevel = $expr.createPseudo(function(filterParam){ 
    return  function(element,context,isXml){
        return  element.getAttribute('data-level') > 2 &&
                element.getAttribute('data-point') >100;
    }
})
  • filterParam 就是像 :eq() 的括弧裡的參數
  • element 是逐一傳入的藥處裡的元素
  • context 是要以哪一個 DOM 元素作為 root 來參考
  • isXml 是否能處理 XML 文件, boolean 值