jQuery选择器模拟:starts-with或:ends-with用于搜索文本?

use*_*236 12 javascript xml jquery contains jquery-selectors

如果你查看jQuery网站上的选择器列表,可以选择有关属性的开始 - 结束和结束.还有一个:contains用于搜索文本的选择器:

alert( $("div").find("span:contains(text)").html() );
Run Code Online (Sandbox Code Playgroud)

jQuery是否有使用starts-with或ends-with搜索字符串的实现?

仅供参考:我需要搜索XML对象.

pim*_*vdb 16

据我所知,默认情况下不是默认,但您可以通过$.expr[":"]以下方式添加自己的伪选择器:http://jsfiddle.net/h6KYk/.

$.extend($.expr[":"], {
    "starts-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // first index is 0
        return text.indexOf(term) === 0;
    },

    "ends-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // last index is last possible
        return text.lastIndexOf(term) === text.length - term.length;
    }
});
Run Code Online (Sandbox Code Playgroud)

  • @ user717236:你在`$ .expr [":"]`中设置的函数被传递了几个参数,以便决定某个元素是否应该通过.`elem`是要测试的元素,`i`是一个计数器.`data`是一个包含选择器值的数组; 如果你选择`:starts-with('foo')`,`data [3]`将是字符串``foo"`.`set`是由函数过滤的所有元素的集合,例如`div:starts-with('foo')`将所有`div`作为`set`传递,然后由函数过滤. (2认同)
  • @ user717236:据我所知,不是直接的.它们是JQuery的选择器引擎Sizzle的一部分.我找不到关于这个主题的官方文章,但[这一个](http://jquery-howto.blogspot.com/2009/06/jquery-custom-selectors-with-parameters.html)似乎解释了一下.作为旁注,您似乎已经发布了jQuery的缩小版本的功能.可读代码在http://jquery.com/上作为"开发"版本. (2认同)

Tim*_*Tim 13

当您不想扩展jQuery时,可以使用该filter()函数创建包含功能:

$("div").find("span").filter(function () {
    return $(this).text().indexOf(text) >= 0;
});
Run Code Online (Sandbox Code Playgroud)

或者使用正则表达式创建startsWith函数:

var expression = new RegExp('^' + text);
$("div").find("span").filter(function () {
    return expression.test($.trim($(this).text()));
});
Run Code Online (Sandbox Code Playgroud)

endsWith函数非常相似:

var expression = new RegExp(text + '$');
$("div").find("span").filter(function () {
    return expression.test($.trim($(this).text()));
});
Run Code Online (Sandbox Code Playgroud)

注意使用$.trim()因为HTML可以包含很多空格.