Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
216 views
in Technique[技术] by (71.8m points)

javascript - Get all items that start with class name

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...