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

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);时，得到一个空的数组。我相信正则表达式是正确的（获取以“page”开头的所有项目）。我使用的代码是老派的JS，但我不排斥使用jQuery。如果有一种不使用正则表达式的解决方案，那也可以，因为我是刚开始使用正则表达式。

- Dairy Window

Answer 1

getElementsByClassName 只匹配类名，不匹配类名的一部分。你不能传递一个正则表达式给它（虽然你可以这样做，但它将被类型转换为字符串，这是没有用的）。

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

<div class="page page1">

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

那么，您可以简单地使用document.getElementsByClassName('page')。

---

如果失败，您可以寻找querySelector和子字符串匹配属性选择器：

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

......但是只有在pageSomething作为class属性中第一个列出的类名时才有效。

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>

- Quentin

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>

- Kaiido

---

这应该是被接受的答案。 - undefined

Answer 3

你可以使用jQuery解决方案..

var $divs = $('div[class^="page"]');

这将获取所有以类名page开头的

元素

- karthik manchala

---

一个更好的答案会解释那个语法实际上是做什么的（并指出它并没有完全按照要求执行）。 - Quentin

@Quentin 这是一个简单的解决方案，它获取所有类以 page 开头的 div 元素。这正是用户想要的。我认为解释一些隐含的事情是不必要的。 - karthik manchala

它获取所有具有以page开头的class属性的div，这与具有以page开头的class不同，因为class属性采用以空格分隔的类列表。 - Quentin

@Quentin 我同意.. 但我认为对于简单情况的简单和调整后的解决方案比复杂和完美的解决方案更好。 - karthik manchala

可能（尽管根据类的位置添加附加语义是未来开发中打破旧JS的好方法），但至少正确记录限制非常重要。 - Quentin

Answer 4

 $(document).ready(function () {
        $("[class^=page]").show();
        $("[class^=page]").hide();
    });

使用此方法可以显示/隐藏具有特定CSS类的div，它将显示/隐藏所有具有所提到的CSS类别的div。

- Fasir Shabbir

---

这个问题是在询问如何匹配其中一个类名以单词“page”开头的元素，而不是尝试匹配整个类名。 - Quentin