Question

获得所有以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;
    });
}

有更清洁的方式吗？这是上述<{p}>的working fiddle

Answer 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/

上的新示例

Answer 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);
    });
}

Answer 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");

它也适用于有人在中间创建一个带点的类。

jQuery - 有以类开头的类

3 个答案: