具有特定类名的CSS类选择器jQuery

Question

我想让类从jQuery中的特定字符串开始

<li class="active cc-1">A1</li>
<li class="cc-2">B1</li>
<li class="cc-ab amimate-me">C1</li>

如何在单击“cc- can”时选择以"<li>"开头的类

$('li').on('click', function(e){
  alert($(this).attr('class^="cc-*"'));
});

Answer 1

另一种使用.attr('class')和Array.prototype.filter()的方法：

​

$('li').on('click', function(e) {
    var classlist = $(this).attr('class');
    if (classlist === undefined) { // check if li doesn't have a class attribute
    	return false;
    }

    // filter and return the class if it starts with 'cc-'
    var ccClass = classlist.split(' ').filter((v, i) => (v.startsWith('cc-')));
    console.log(ccClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="active cc-1">A1</li>
    <li class="cc-2">B1</li>
    <li class="cc-ab amimate-me">C1</li>
    <li>D1</li>
    <li class="animate-me">E1</li>
</ul>

​

Answer 2

可以使用Element.classList属性迭代元素的类属性集合。String.prototype.startsWith()可以用来测试。

在这个例子中，由于多个类可以满足条件，所以使用Array。

​

jQuery(function($) {
  $('li').on('click', function(e) {
    var arr = []
    for (var i = 0; i < this.classList.length; i++) {
      var item = this.classList.item(i);
      if (item.startsWith("cc-")) {
        arr.push(item);
      }
    }
    
    console.clear();
    console.log(arr);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active cc-1">A1</li>
  <li class="cc-2">B1</li>
  <li class="cc-ab amimate-me">C1</li>
</ul>

​

Answer 3

你必须在双引号之后给明星这样的答案，

alert($(this).attr('class^="cc-"*'));