Question

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

<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

getElementsByClassName只匹配类，而不是类的位。你不能将正则表达式传递给它（好吧，你可以，但它会被转换为字符串，这是无用的）。

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

<div class="page page1">

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

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

如果失败，您可以查看querySelector和substring matching attribute selector：

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

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

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

...但是这将匹配提及＆＃34; page＆＃34;而不只是那些以＆＃34; page＆＃34;开头的课程。（即它将匹配class="not-page"。

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

＆＃13;

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";
  }

＆＃13;

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

＆＃13;

Answer 2

您无法在选择器内使用RegExp 但你可以use Document.querySelectorAll()而不是Element.classList.contains()

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 3

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

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

这将获得以classname page

开头的所有div

Answer 4

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

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

第一部分是[class^="page"]，它将找到其类属性以page开头的所有元素，因此不适用于由[class*=" page"]修复的具有多个类的元素它将找到所有其class属性在某处具有字符串" 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>

Answer 5

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

使用它来显示具有特定css类的hide div，它将显示/隐藏所有div与css类提及。

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

5 个答案: