javascript - 获取具有特定类名后跟数字的所有类

Question

例如一个名为 movelist_1、movelist_2 的类，我如何获取所有 movelist 类后跟一个下划线和一个数字？

Answer 1

那么，假设我们有

<h1 class="my_1">Hello 1</h1>
<h1 class="my_2">Hello 2</h1>
<h1 class="my_3">Hello 3</h1>
<h1 class="my_NaN">Hello NaN</h1>
<h1 class="not_my">No Hello</h1>

要获取“my_”+ 数字元素，我会结合使用 querySelectorAll(获取类以“my_”开头的元素)和手动正则表达式解析(过滤非数字情况) :

function getMyElements() {
  var result = document.querySelectorAll("[class^=my_]"); // just started with "my_"

  var _result = [];
  for(var i = result.length - 1; i >= 0; i--) {
    for(var j = result[i].classList.length - 1; j >= 0; j--) {
      if(result[i].classList[j].search(/my_\d/i) === 0) { // started with "my_" + digit
         _result.push(result[i]);
      }
    }
  }
  return _result; 
}

console.log(getMyElements()); // (3) [h1.my_3, h1.my_2, h1.my_1]

当多个类被分配给元素时，需要内部循环来处理这种情况。