获取所有以班级名称开头的项目

Question

我试图只显示某些div。我决定执行此操作的方法是先隐藏所有以“ page”开头的元素，然后仅显示正确的divs。这是我的（简化）代码：

<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);得到一个空白数组时。我很确定regexp是正确的（获取所有以'page'开头的项目）。我使用的代码是老式的JS，但我并不反对使用jQuery。另外，如果有不使用regexp的解决方案，那也很好，因为我是使用regexp的新手。

Answer 1

getElementsByClassName仅在类上匹配，而不在类中匹配。您不能将正则表达式传递给它（可以，但是它将被类型转换为字符串，这是无益的）。

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

<div class="page page1">

即这个div是一个页面，它也是一个page1。

然后，您可以简单地进行操作document.getElementsByClassName('page')。

失败的话，您可以查看querySelector和子字符串匹配的属性选择器：

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

…但这仅在class属性中列出pageSomething的第一个类名有效。

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

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

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

<div class="page page1">

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

Answer 2

以前的答案包含正确答案的一部分，但没有一个真正给出它。

为此，您需要使用逗号,分隔符在单个查询中组合两个选择器。

第一部分是[class^="page"]，它将找到所有类属性以 开头的元素page，因此对于具有多个类的元素不可行，这是固定的[class*=" page"]，它将找到所有类属性具有字符串某处的元素" page"（注意在开始）。

通过组合两个选择器，我们得到了 classStartsWith 选择器：

document.querySelectorAll('[class^="page"],[class*=" page"]')
  .forEach(el => el.style.backgroundColor = "green");

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