获取具有某个类名的所有类后跟一个数字

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>

获得＆＃34;我的_＆＃34; +一个数字元素我会使用querySelectorAll的组合（以获取以＆＃34开头的类的元素;我的_＆＃34;）和手动regexp解析（以过滤非数字情况）：

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]

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

Answer 2

你可以使用document.querySelectorAll()获取所有内容。结果是NodeList。使用

浏览NodeList

[].forEach.call();

＆＃13;

＆＃13;

// For example get all innerHTML

var res = [];
[].forEach.call(document.querySelectorAll("[class^=movelist_]"), m => {
  res.push(m.innerHTML);
});

console.log(res);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<div class="movelist_1">Move 1</div>
<div class="movelist_2">Move 2</div>
<div class="movelist_3">Move 3</div>
<div class="movelist_4">Move 4</div>
<div class="movelist_5">Move 5</div>

＆＃13;

＆＃13;

＆＃13;