Javascript jquery如何选择所有以“text-”开头的类元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4161869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery how to select all the class elements start with "text-"?
提问by user469652
I have got some classes
我有一些课
.text-1
.text-2
.text-3
I want to select them all, how to do that? Thanks for the help
我想全选，怎么做？谢谢您的帮助
回答by Chinmayee G
Try this. For more details refer jquery selectors
尝试这个。有关更多详细信息，请参阅jquery selectors
$('*[class^="text"]')
回答by hobbs
Here's an attempt at a solution that's both accurate and not too slow:
这是对既准确又不太慢的解决方案的尝试：
var elts = $('*[class*="text-"]')
.filter(function () {
return this.className.match(/(?:^|\s)text-/);
});
Which works by using the (hopefully) fast Sizzle code to find elements that have "text-" anywhere in their classattribute, and then calls a function on each of those to filter them down to the ones that actually have "text-" at the beginning of a class name.
它通过使用（希望）快速 Sizzle 代码来查找class属性中任何位置具有“text-”的元素，然后在每个元素上调用一个函数以将它们过滤到实际具有“text-”的元素类名的开头。
回答by Daniel Thompson
You can do this with just two selectors in one function call:
您可以在一个函数调用中只使用两个选择器来做到这一点：
$('[class^="text-"], [class*=" text-"]')
$('[class^="text-"], [class*=" text-"]')
This will check if the class attribute starts with text-or if there is any part of the class string that has a space followed by text-. This solves any issues you might have with the
这将检查类属性是否以 开头，text-或者类字符串的任何部分是否有空格后跟text-. 这可以解决您可能遇到的任何问题
$('[class^="text-"], [class*=" text-"]')
.css('background-color', '#00FF00'); // add background color for demo/* just for demo */
div:after {
content: "class: " attr(class);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-1 test"></div>
<div class="text some-text-1"></div>
<div class="nope text-long-class-name"></div>
<div class="some-text-1"></div>
<div class="even get text-n-here"></div>You could pull this out into a function that selects all elements with a class that matches a given prefix, as well:
您可以将其提取到一个函数中，该函数也选择具有与给定前缀匹配的类的所有元素：
function selectElementsWithClassPrefix(prefix) {
return $('[class^="' + prefix + '"], [class*=" ' + prefix + '"]');
}
回答by Sarfraz
You don't necessarily need to specify asterisk *, you can do this too:
您不一定需要指定 asterisk *，您也可以这样做：
$('[class^="text-"]')
Notice the addition of -after textsomething you are looking for.
请注意在您正在寻找的东西-之后添加text。
Check out the jQuery starts with selectorfor more information.
查看jQuery 以选择器开头以获取更多信息。
回答by Ken Redler
Here's a function that deals with the issue of multiple classes, in cases like <div class="foo bar barfood">:
这是一个处理多个类问题的函数，在以下情况下<div class="foo bar barfood">：
function classStartsWith(str) {
return $('div').map( function(i,e) {
var classes = e.className.split(' ');
for (var i=0, j=classes.length; i < j; i++) {
if (classes[i].substr(0, str.length) == str) return e;
}
}).get();
}
The function returns an array of matching DOM elements. You can use it thus:
该函数返回一组匹配的 DOM 元素。你可以这样使用它：
$( classStartsWith('text-') ).doSomething();
Here's an example: http://www.jsfiddle.net/Ms6ey/3/
这是一个例子：http: //www.jsfiddle.net/Ms6ey/3/
Of course this assumes the selector 'div'. The question seems to be asking about any element at all. It's easy enough to make the function take a selector as another argument, and use that in place of the hardcoded one in the example.
当然，这假定选择器'div'。这个问题似乎是在询问任何元素。很容易让函数将选择器作为另一个参数，并使用它代替示例中的硬编码。
回答by kobe
$('#qvDetails,#qvAdd,.qvFramedActive,#qvMoreSizes').live('mouseover',function(){
$(this).addClass('qvHover');
});
example from one of my projects.you can mention both divs and classes together like above
来自我的一个项目的示例。您可以像上面一样同时提及 div 和类
you can provide as coma separated class or divs in the same...
您可以在同一个中提供昏迷分隔的类或 div...
