jQuery - 具有以开头的类答案

【问题标题】：jQuery - has class that starts withjQuery - 具有以开头的类
【发布时间】：2013-06-24 23:30:17
【问题描述】：

获取所有类以input 开头的所有 div 的最佳方法是什么？换句话说，a 和 b 应该从下面返回，而不是 c。

<div id="a" class="input1 foo"></div>
<div id="b" class="foo input2"></div>
<div id="c" class="xinput3 foo"></div>

出人意料地被here接受的表面上的方法是做$("div[class^='input']");，但当然错过了b。当然$("div[class*='input']"); 会给c 一个误报。

我能想到的最好的就是这个怪物

function getAllInputDivs() {
    return $("div").filter(function (i, currentDiv) {
        return $.grep($(currentDiv).attr("class").split(" "), function (val) {
            return val.substr(0, "input".length) === "input";
        }).length > 0;
    });
}

有没有更清洁的方法？这是上面的working fiddle

【问题讨论】：

当有 input1 和 input2 之类的东西时，我不认为类名是最好的选择。如果输入足够独特，可以以这种方式枚举，您可以使用 ID 或名称，可以使用 $("[id^=input]") 选择
@KevinB - 你可能是对的。我不确定这是否有一个很好的用例。现在这只是一个理论上的问题，看看它是否可以做到。
类似问题：jQuery selector to target any class name (of multiple present) starting with a prefix? 但我之前没有自定义选择器表达式，所以我很喜欢这个问题的答案 :)
@BoltClock：自定义选择器中断querySelectorAll。他们不值得。
@ЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖ：确实如此。

标签： javascript jquery

【解决方案1】：

您可以在 jQuery 中创建自己的表达式

$.expr[':'].hasClassStartingWithInput = function(obj){
  return (/\binput/).test(obj.className);
};

你可以用

检索那些 div

$('div:hasClassStartingWithInput');

一个 JsFiddle 示例：http://jsfiddle.net/7zFD6/

编辑：您也可以通过这种方式使用参数（无需在函数标识符中硬编码类名）

$.expr[':'].hasClassStartingWith = function(el, i, selector) {
  var re = new RegExp("\\b" + selector[3]);
  return re.test(el.className);
}

http://jsfiddle.net/pMepk/1/ 上的新示例

【讨论】：

不应该把\b 改成^ 吗？
不，它没有。 ^ 只会检查以 input 开头的类是否也是类属性中列出的第一个类。正如他在问题中指定的那样，他需要有 a 和 b 案例
我认为\b 在某些（狭窄的）情况下可能会失败，因为一个类可能包含将被解释为单词边界的字符。比如my.input，这是一个有效的类。
@ЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖΞЖ - 我能够忍受那些狭窄的例外。我无法想象，曾经想创建一个my.input的类名
@FabrizioCalderan Paren-sequences 像 (( 甚至 ((( 会降低代码的可读性（在我看来）——我尽量摆脱它们...

【解决方案2】：

这是一种方法...

function getAllInputDivs() {
    return $("div").filter(function () {
        return /(?:^|\s)input/.test(this.className);
    });
}

或者让它更通用...

function classStartsWith( tag, s ) {
    var re = new RegExp('(?:^|\\s)' + s);
    return $(tag || '*').filter(function () {
        return re.test(this.className);
    });
}

如果您不喜欢正则表达式，也可以采用indexOf 方法...

function classStartsWith( tag, s ) {
    return $(tag || '*').filter(function () {
        return this.className.indexOf(s)===0 || this.className.indexOf(' ' + s)>-1;
    });
}

虽然您应该知道它不测试制表符字符，只测试空格字符，所以如果使用制表符而不是空格，它可能会失败。

回到正则表达式版本，您可以通过将搜索到的字符串添加到选择器来提高效率。

那么它只是测试 div 的一个子集。

function getAllInputDivs() {
    return $("div[class*='input']").filter(function () {
        return /(?:^|\s)input/.test(this.className);
    });
}

仅将.filter() 应用于您知道在课堂上某处有input 的那些div，性能将会提高。

或者通用版本看起来像这样：

function classStartsWith( tag, s ) {
    var re = new RegExp('(?:^|\\s)' + s);
    return $((tag || '*') + '[class*="' + s + '"]').filter(function () {
        return re.test(this.className);
    });
}

【讨论】：

+1 - 很好 - 看起来你修复了 Fabrizio 回答中的正则表达式。

【解决方案3】：

这是我解决问题的方法：

(function($) {
    $.fn.hasClassStartsWith = function(klass) {
    var _return = [];
    for(var i = 0; i < this.length; i++){
        if((' ' + $(this[i]).attr('class')).indexOf(klass) != -1)
            _return.push(this[i]);
    }
    return _return;
    }
})(jQuery);

如下使用：

var divs = $('div').hasClassStartsWith("my_class_prefix");

它也适用于某人创建一个中间有一个点的类的情况。

【讨论】：