Using jQuery to Select Multiple Ids

We can use jQuery to select multiple ids very easily by using the jQuery id selector on multiple ids.

$("#id1, #id2, #id3").attr("required",true);

Let’s see an example of this.

Let’s say we have the following HTML:

<div>
  <div id="div1">This is an empty div</div>
  <div id="div2">This is an empty div</div>
  <div id="div3">This is an empty div</div>
  <div id="div4">This is an empty div</div>
  <div id="div5">This is an empty div</div>
  <div id="div6">This is an empty div</div>
</div>

Say we wanted to change the background color of div’s 1, 4, and 5. We can do this by using jQuery to select the ids of those divs and then change the background color using the css() method.

Here is the jQuery code to select multiple ids:

$("#div1, #div4, #div5").css("background","green");

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1, #div4, #div5").css("background","green");

Using jQuery to Select Multiple Ids With a Click

In this example, we will have multiple divs with different ids. Each div will be a box with a white background and a black border. We will let the user click a button that will then change a random number of box background colors to green.

Here is the HTML setup:

<style>.box{ float: left; width: 50px; height: 50px; background: #fff; border: 1px solid #999; margin-right: 10px; margin-bottom: 10px; }</style><div id="div">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box"></div>
  <div id="box5" class="box"></div>
  <div id="box6" class="box"></div>
  <div id="box7" class="box"></div>
  <div id="box8" class="box"></div>
  <div id="box9" class="box"></div>
  <div id="box10" class="box"></div>
  <div id="box11" class="box"></div>
  <div id="box12" class="box"></div>
  <div id="box13" class="box"></div>
  <div id="box14" class="box"></div>
  <div id="box15" class="box"></div>
  <div id="box16" class="box"></div>
</div>
<div class="clear"></div>
<div id="click-me">Change random boxes</div>
<div id="results"></div>

In the JavaScript part of this example, we will generate a random number between 1 and 16 (16 being the max number of boxes we have).

We will then change the background colors of the boxes whose id numbers match the numbers we randomly selected, to a greenish color.

We will use our code above to select all of the ids for the boxes at once, and change all the background colors of those boxes at once.

Finally, we will let the user know how many boxes we have changed using the html() method.

Here is the code:

$("#click-me").click(function(){
  //First reset all background colors to white
  $(".box").css("background","#fff");

  //Generate random numbers from 1-16
  var randomNum = Math.round(Math.random() * 15) +1;

  //Loop through all elements of the array
  var stringIds = "";
  var numbers = [];
  for( var i = 0; i < randomNum; i++ ){
    //Generate a random number that will be the id for a box
    var idNum = Math.round((Math.random() * 15)+1);
    if( numbers.indexOf(idNum) == -1 ){
      //Add number to our array
      numbers.push(idNum);
      if ( i == 0 ){ 
        stringIds += "#box" + idNum;   
      } else {
        //If it is not the first time in the loop, the code below will be slightly different
        stringIds += ", #box" + idNum;   
      }
    }
  }
  //Now that we have a string with all of our ids, we can change the bg color of them
  $(stringIds).css("background","#7bbfa2");

  //Let the user know how many boxes were changed
  if( numbers.length == 1 ){
    $("#results").html("Div <b>" + stringIds + "</b> was changed!");
  } else {
    $("#results").html("Divs <b>" + stringIds + "</b> were changed!");
  }
});

The final code and output for this example is below.

Code Output:

Full Code:

<style>.box{ float: left; width: 50px; height: 50px; background: #fff; border: 1px solid #999; margin-right: 10px; margin-bottom: 10px; }</style><div id="div">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box"></div>
  <div id="box5" class="box"></div>
  <div id="box6" class="box"></div>
  <div id="box7" class="box"></div>
  <div id="box8" class="box"></div>
  <div id="box9" class="box"></div>
  <div id="box10" class="box"></div>
  <div id="box11" class="box"></div>
  <div id="box12" class="box"></div>
  <div id="box13" class="box"></div>
  <div id="box14" class="box"></div>
  <div id="box15" class="box"></div>
  <div id="box16" class="box"></div>
</div>
<div class="clear"></div>
<div id="click-me">Change random boxes</div>
<div id="results"></div>

<script>

$("#click-me").click(function(){
  $(".box").css("background","#fff");
  var randomNum = Math.round(Math.random() * 15) +1;
  var stringIds = "";
  var numbers = [];
  for( var i = 0; i < randomNum; i++ ){
    var idNum = Math.round((Math.random() * 15)+1);
    if( numbers.indexOf(idNum) == -1 ){
      numbers.push(idNum);
      if ( i == 0 ){ 
        stringIds += "#box" + idNum;   
      } else {
        stringIds += ", #box" + idNum;   
      }
    }
  }
  $(stringIds).css("background","#7bbfa2");
  if( numbers.length == 1 ){
    $("#results").html("Div <b>" + stringIds + "</b> was changed!");
  } else {
    $("#results").html("Divs <b>" + stringIds + "</b> were changed!");
  }
});

</script>

Hopefully this article has been useful to help you understand how to use the jQuery to select multiple ids.