jQuery 自定义选择器及应用_jq 自定义选择器的使用-CSDN博客

本文链接：https://blog.csdn.net/xyc_csdn/article/details/68962692

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<input type="text">
<ul>
    <ol>0</ol>
    <ol>01</ol>
    <ol>012</ol>
    <ol>0123</ol>
    <ol>01234</ol>
    <ol>012345</ol>
    <ol>0123456</ol>
    <ol>01234567</ol>
    <ol>012345678</ol>
    <ol>0123456789</ol>
    <ol>0123456789</ol>
</ul>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script>
    $.expr[':'].haveText = function (obj, index, meta, stack) {
        /* obj   - is a current DOM element 当前DOM元素
         index - the current loop index in stack 当前元素在stack中的索引，
         meta  - meta data about your selector !!! 用来存参数值，详见带参数的自定义选择器。
         stack - stack of all elements to loop 选择器所选中的元素集。

         Return true to include current element 返回 true 就包含当前元素
         Return false to explude current element 返回 false 就抛弃当前元素
         */
        return (obj.textContent || obj.innerText || "").toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
    };
    $(function () {
        $("input").change(function () {
            var val = $(this).val();
            if (!val) {
                $("ol").slideDown();
                return;
            }
            var $showOl = $("ol:haveText(" + val + ")")
            $("ol").not($showOl).slideUp();
            $showOl.slideDown();
        }).keyup(function () {
            $(this).change();
        });
    });
</script>
</body>
</html>