Get all items that start with class name

Question

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 <

Answer 1

Previous answers contain parts of the correct one, but none really gives it.

To do this, you need to combine two selectors in a single query, using the comma , separator.

The first part would be [class^="page"], which will find all the element whose class attribute begins with page, and thus not viable for elements with multiple classes, which is fixed by [class*=" page"] which will find all elements whose class attribute have somewhere the string " page"(note the space at the beginning).

By combining both selectors, we have our classStartsWith selector:

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 2

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>

Answer 3

You can use jQuery solution..

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

This will get all the divs which start with classname page

Answer 4

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

Use this to show hide div's with specific css class it will show/hide all div's with css class mention.

Answer 5

You cannot use RegExp inside a selector
but you can 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>

Additionally, to prevent false-positives (like i.e: class="row pageCool") being matched, you could try to be more specific using your selectors like i.e: adding a parent ID...

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