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

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

Answer 1

您不能在选择器中使用 RegExp
但你可以 use Document.querySelectorAll() and thanElement.classList.contains()

function showfields(page){
  
  var items = document.querySelectorAll("[class*=page].row");
  
  [].forEach.call(items, function(el){
      el.style.display = el.classList.contains("page"+ page) ? "" : "none";
  });

}

<form>    
    <input type="text" onfocus="showfields(1);">
    <input type="text" onfocus="showfields(2);">
</form>
<div class="page1 row">Some content1</div>
<div class="page1 row">Some content1</div>
<div class="page2 row">Some content2</div>
<div class="page2 row">Some content2</div>

此外，为了防止误报（例如：class="row pageCool"）被匹配，您可以尝试使用选择器更加具体，例如：添加父 ID...

 ...rAll("#togglablePagesParent [class*=page]")

Answer 2

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

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

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

Answer 3

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

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

<div class="page page1">

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

那么你可以简单地 document.getElementsByClassName('page').

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

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

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

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

… 但这将匹配提到 "page" 的 class 属性，而不仅仅是那些以 "page" 开头的带有 class 的属性（即它将匹配 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>

Answer 4

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

使用它来显示隐藏 div 与特定 css class 它会 show/hide 所有 div 与 css class提及。

Answer 5

以前的答案包含部分正确答案，但 none 确实给出了正确答案。

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

第一部分是[class^="page"]，它将找到所有class属性以page开头的元素，因此这个选择器不适用于多个[=33]的元素=]es，但这可以通过 [class*=" page"] 修复，它会找到所有 class 属性在某处有字符串 " page" 的元素（注意开头的 space）。

通过组合两个选择器，我们得到 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>

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

Get all items that start with class name

javascript

regex

getelementsbyclassname