jquery如何选择所有类元素以“text-”开头?

时间:2010-11-12 05:24:12

标签: javascript jquery

我有一些课程

.text-1
.text-2
.text-3

我想全部选择它们,怎么做? 谢谢你的帮助

6 个答案:

答案 0 :(得分:62)

试试这个。有关详细信息,请参阅jquery selectors

$('*[class^="text"]')

答案 1 :(得分:13)

这是尝试一种既准确又不太慢的解决方案:

var elts = $('*[class*="text-"]')
  .filter(function () {
    return this.className.match(/(?:^|\s)text-/);
  });

通过使用(希望)快速的Sizzle代码来查找在其class属性中的任何位置具有“text-”的元素,然后在每个元素上调用一个函数来将它们过滤到那些实际上在类名的开头有“text-”。

答案 2 :(得分:2)

您不一定需要指定星号*,您也可以这样做:

$('[class^="text-"]')

请注意在-之后添加text

查看jQuery starts with selector了解详情。

答案 3 :(得分:0)

这是一个处理多个类问题的函数,例如<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();
}

该函数返回一个匹配的DOM元素数组。你可以这样使用它:

$( classStartsWith('text-') ).doSomething();

以下是一个示例:http://www.jsfiddle.net/Ms6ey/3/

当然这假设选择器'div'。问题似乎在于询问任何元素。很容易使函数将选择器作为另一个参数,并使用它代替示例中的硬编码。

答案 4 :(得分:0)

您可以在一个函数调用中只使用两个选择器来执行此操作:

$('[class^="text-"], [class*=" text-"]')

这将检查class属性是以text-开头还是类字符串的任何部分有空格后跟text-。这解决了您可能遇到的任何问题

&#13;
&#13;
$('[class^="text-"], [class*=" text-"]')
    .css('background-color', '#00FF00'); // add background color for demo
&#13;
// just for demo
div:after {
  content: "class: " attr(class);
}
&#13;
<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>
&#13;
&#13;
&#13;

您可以将其拉出到一个函数中,该函数选择具有与给定前缀匹配的类的所有元素:

function selectElementsWithClassPrefix(prefix) {
    return $('[class^="' + prefix + '"], [class*=" ' + prefix + '"]');
}

答案 5 :(得分:-4)

$('#qvDetails,#qvAdd,.qvFramedActive,#qvMoreSizes').live('mouseover',function(){

        $(this).addClass('qvHover');                                                                            

    });

来自我的一个项目的示例。您可以像上面一样提及div和类

你可以提供同样的昏迷分类或div ...