获取所有以类名开头的项目 [英] Get all items that start with class name

问题描述

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

<input type="text" onfocus="showfields(1);"><input type="text" onfocus="showfields(2);"></表单><div class="page1 row">部分内容</div><div class="page1 row">部分内容</div><div class="page2 row">部分内容</div><div class="page2 row">部分内容</div><脚本>功能显示字段(页面){//隐藏类以page开头的所有项目*var patt1 =/^page/;var items = document.getElementsByClassName(patt1);控制台日志(项目)；for(var i = 0; i < items.length; i++){items[i].style.display = "none";}//现在显示所有具有'page'+page类的项目var item = document.getElementsByClassName('page' + page);item.style.display = '';}

当我 console.log(items); 我得到一个空数组.我很确定正则表达式是正确的(获取以page"开头的所有项目).我使用的代码是老式的 JS，但我并不反对使用 jQuery.此外，如果有一个不使用正则表达式的解决方案，那也很好，因为我是使用正则表达式的新手.

解决方案

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

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

即这个div是一个page，也是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]");控制台.日志(潜力.长度)；元素循环:for (var i = 0; i 

<div class="page">Yes</div><div class="notpage">否</div><div class="某个页面">是</div><div class="pageXXX">是</div><div class="page1">是</div><div class="some">完全不匹配</div>

I'm trying to only show certain divs. The way I have decided to do this is to first hide all elements that start with "page" and then only show the correct divs. Here's my (simplified) code:

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

When I console.log(items); I get a blank array. I'm pretty sure the regexp is right (get all items starting with 'page'). The code I'm using is old school JS, but I'm not adverse to using jQuery. Also if there is a solution that doesn't use regexp, that's fine too as I'm new to using regexp's.

解决方案

getElementsByClassName only matches on classes, not bits of classes. You can't pass a regular expression to it (well, you can, but it will be type converted to a string, which is unhelpful).

The best approach is to use multiple classes…

<div class="page page1">

i.e. This div is a page, it is also a page1.

Then you can simply document.getElementsByClassName('page').

---

Failing that, you can look to querySelector and a substring matching attribute selector:

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

… but that will only work if pageSomething is the first listed class name in the class attribute.

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

… but that will match class attributes which mention "page" and not just those with classes which start with "page" (i.e. it will match class="not-page".

That said, you could use the last approach and then loop over .classList to confirm if the element should match.

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>

这篇关于获取所有以类名开头的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！