Question

我希望在jQuery

中以特定字符串开头

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

如何选择“cc-ANYTHING”选择班级，点击"<li>"

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

Answer 1

您可以使用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 2

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

＆＃13;

$('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);
});

＆＃13;

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

＆＃13;

Answer 3

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

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

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

3 个答案: