javascript - get all elements that start with "hide"

Question

Essentially, I'd like to hide certain list items in a variable size list of elements on the click of a button.

getElementById doesn't really serve the purpose by itself, because I need to hide all the list elements whose id starts with "hide". So for example, I need to hide li#hide1, li#hide2, etc. Any ideas as to how to go about this?

Answer 1

It should be something like this:

document.querySelectorAll("[id^=hide]")

Answer 2

jsFiddle demo

var liHide = document.querySelectorAll("[id^=hide]");

for(var i=0; i<liHide.length; i++){
   // do someghing with liHide[i] like:
   liHide[i].style.display = "none";
}

If you use jQuery you can do it simply like:

$( "li[id^=hide]" ).hide(); // Hide all LI which ID starts with "hide"

Answer 3

If you are using jQuery you can do something like this:

$( "li[id^='hide']" ).each(function(){
   $(this).hide();
});

Answer 4

document.querySelectorAll('[id^="hide"]');