jQuery – 有以类开头的类

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

令人惊讶地接受的表面方式是做$("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; }); } 

有更干净的方式吗？ 这是上面的工作小提琴

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版本看起来像这样：

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

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