如何创建自定义jQuery过滤器

最新推荐文章于 2020-04-20 09:59:12 发布

生活中的思索

最新推荐文章于 2020-04-20 09:59:12 发布

阅读量299

点赞数

文章标签： jquery 技术游戏 class console

本文链接：https://blog.csdn.net/qq_35864642/article/details/80134784

版权

假设你正在开发一个技术游戏，你需要完成一系列难度级别的列表，用户可以赚取的点数以及用来完成它的技术列表。你的假设清单可能类似于：

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

现在想象你经常需要检索高于2的级别（数据级别），但只有在这种情况下他们允许你赚取超过100分（数据点），并在要使用的技术列表中包含jQuery（数据技术）。
使用迄今为止获得的知识，您将知道如何在属性data-technologies（li [data technologies〜=“jquery”））中搜索具有jQuery单词的li元素。但是，如何使用选择器进行数字比较？事实是你不能。为了完成这个任务，你必须遍历你的初始选择，然后只保留你需要的元素，如下所示：

var $levels = $('.levels li[data-technologies~="jquery"]');
var matchedLevels = [];
for(var i = 0; i < $levels.length; i++) {
    if ($levels[i].getAttribute('data-level') > 2 &&
        $levels[i].getAttribute('data-points') > 100) {
        matchedLevels.push($levels[i]);
    }
}

您不必每次重复这些行，都可以创建自定义过滤器：

$.expr[':'].requiredLevel = $.expr.createPseudo(function(filterParam) {
    return function(element, context, isXml) {
        return element.getAttribute('data-level') > 2 &&
        element.getAttribute('data-points') > 100;
    };
});

想象一下，你想根据提供的点数检索关卡 - 例如“选择所有关卡的点数高于X”。这个大的X是一个很好的机会，可以使用参数传递给你的伪选择器。根据这一要求，您可以创建一个新的过滤器：

$.expr[':'].pointsHigherThan = $.expr.createPseudo(function(filterParam) {
    var points = parseInt(filterParam, 10);
        return function(element, context, isXml) {
        return element.getAttribute('data-points') > points;
    };
});

整体实例代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
   <input  type="button" value="选择上下文中的第一个匹配项" id="btn1"/>

    <br><br>
<div>
<ul class="levels">
<li data-level="1" data-points="1" data-technologies="javascript node
grunt">Level 1</li>
<li data-level="2" data-points="10" data-technologies="php composer">Level
2</li>
<li data-level="3" data-points="100" data-technologies="jquery
requirejs">Level 3</li>
<li data-level="4" data-points="1000" data-technologies="javascript jquery
backbone">Level 4</li>
</ul>
</div>
      <script src="../js/jquery-1.11.3.min.js"></script>
      <style type="text/css">   
    </style>
    <script type="text/javascript">

    $.expr[':'].requiredLevel = $.expr.createPseudo(function (filterParam) {
       return function (element, context, isXml) {
          return element.getAttribute('data-level') > 2 && element.getAttribute('data-points') > 100;
       };
    });

    $.expr[':'].pointsHigherThan = $.expr.createPseudo(function (filterParam) {
       var points = parseInt(filterParam, 10);
       return function (element, context, isXml) {
          return element.getAttribute('data-points') > points;
       };
    });

    var $levels = $('.levels li[data-technologies~="jquery"]');
    var matchedLevels = [];
    for (var i = 0; i < $levels.length; i++) {
       if ($levels[i].getAttribute('data-level') > 2 && $levels[i].getAttribute('data-points') > 100) {
          matchedLevels.push($levels[i]);
       }
    }
    console.log(matchedLevels.length);

    var $requiredLevels = $('.levels li:requiredLevel');
    console.log($requiredLevels.length);

    var $higherPointsLevels = $('.levels li:pointsHigherThan(50)');
    console.log($higherPointsLevels.length);


    </script>
   </body>
</html>

生活中的思索

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何创建自定义jQuery过滤器

假设你正在开发一个技术游戏，你需要完成一系列难度级别的列表，用户可以赚取的点数以及用来完成它的技术列表。你的假设清单可能类似于：<ul class="levels"><li data-level="1" data-points="1" data-technologies="javascript node grunt">Level 1</li><li data-level="2" data-po
复制链接

扫一扫