javascript - 获取所有以类名开头的项目

Question

我试图只显示某些 div。我决定这样做的方法是首先隐藏所有以“page”开头的元素，然后只显示正确的 div。这是我的(简化的)代码:

<form>    
    <input type="text" onfocus="showfields(1);">
    <input type="text" onfocus="showfields(2);">
</form>
<div class="page1 row">Some content</div>
<div class="page1 row">Some content</div>
<div class="page2 row">Some content</div>
<div class="page2 row">Some content</div>
<script>
    function showfields(page){
        //hide all items that have a class starting with page*
        var patt1 = /^page/;
        var items = document.getElementsByClassName(patt1);
        console.log(items);
        for(var i = 0; i < items.length; i++){
            items[i].style.display = "none";
        }

        //now show all items that have class 'page'+page
        var item = document.getElementsByClassName('page' + page);
        item.style.display = '';
    }
</script>

当我 console.log(items); 我得到一个空白数组。我很确定正则表达式是正确的(获取所有以“页面”开头的项目)。 我使用的代码是老派的 JS，但我并不反对使用 jQuery。此外，如果有不使用正则表达式的解决方案，那也没关系，因为我是刚开始使用正则表达式的。

Answer 1

getElementsByClassName 只匹配类，而不是类的位。您不能将正则表达式传递给它(好吧，您可以，但它会被类型转换为字符串，这没有帮助)。

最好的方法是使用多个类......

<div class="page page1">

即这个div是一个page，也是一个page1。

然后您可以简单地document.getElementsByClassName('page')。

---

否则，您可以查看 querySelector 和 substring matching attribute selector :

document.querySelectorAll("[class^=page]")

…但这只有在 pageSomething 是类属性中第一个列出的类名时才有效。

document.querySelectorAll("[class*=page]")

…但这将匹配提及“page”的类属性，而不仅仅是那些以“page”开头的类的属性(即它将匹配 class="not-page"。

也就是说，您可以使用最后一种方法，然后遍历 .classList 以确认元素是否应该匹配。

var potentials = document.querySelectorAll("[class*=page]");
console.log(potentials.length);
elementLoop:
  for (var i = 0; i < potentials.length; i++) {
    var potential = potentials[i];
    console.log(potential);
    classLoop:
      for (var j = 0; j < potential.classList.length; j++) {
        if (potential.classList[j].match(/^page/)) {
          console.log("yes");
          potential.style.background = "green";
          continue elementLoop;
        }
      }
    console.log("no");
    potential.style.background = "red";
  }

<div class="page">Yes</div>
<div class="notpage">No</div>
<div class="some page">Yes</div>
<div class="pageXXX">Yes</div>
<div class="page1">Yes</div>
<div class="some">Unmatched entirely</div>