• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Select Multiple Ids

Using jQuery to Select Multiple Ids

July 5, 2022 Leave a Comment

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:

Change random boxes

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.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Get the Current URL
  • 2.  Using jQuery to Hide Element by Class
  • 3.  Using jQuery prepend to Insert Element As First Child
  • 4.  How to Use jQuery to Remove Element
  • 5.  Using jQuery to Scroll to Div
  • 6.  jQuery after – Insert HTML After Another Element
  • 7.  jQuery blur – How to Use the blur() Method on an HTML Form
  • 8.  Using jQuery to see if URL Contains Specific Text
  • 9.  jQuery parent – Get the Parent Element of a Div
  • 10.  jQuery Display None

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy