How to convert multiple IDs to a class?

Question

I have more than one monday, tues in one page so I want to replace the id="Monday3" to class="Monday" and not be adding a number frequently for all my time box html

var now3 = new Date();
var checkTime3 = function() {
var today = weekday3[now3.getDay()];
var dayOfWeek = now3.getDay();
var hour = now3.getHours();
var minutes = now3.getMinutes();

//add AM or PM
var suffix = hour >= 12 ? "PM" : "AM";


// add 0 to one digit minutes
if (minutes < 10) {
minutes = "0" + minutes
};

if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 ) && hour >= 10 && hour <= 21) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15

timeDiv3.innerHTML =  today ;

}

else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour >= 10 && hour <= 22) {
hour = ((hour + 11) % 12 + 1);

timeDiv3.innerHTML =  today;

}

else {
if (hour == 0 || hour > 9) {
  hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
}

timeDiv3.innerHTML = today;

}
};

var weekday3 = new Array(7);
weekday3[0] = "Sunday3";
weekday3[1] = "Monday3";
weekday3[2] = "Tuesday3";
weekday3[3] = "Wednesday3";
weekday3[4] = "Thursday3";
weekday3[5] = "Friday3";
weekday3[6] = "Saturday3";

var currentDay3 = weekday3[now3.getDay()];
var currentDayID3 = "#" + currentDay3; //gets todays weekday and turns it into id
$(currentDayID3).toggleClass("today"); //hightlights today in the view hours modal popup'

setInterval(checkTime3, 1000);
checkTime3();

.highlight{
  background:#FFFF00;
}

.dateTime  {
  max-width: 320px;
  margin: 0 auto;
}

.day {
  display: inline-block;
  float: left;
}

.time {
  display: inline-block;
  float: right
}

.today {
  color: rgb(200, 85, 39);
  font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="Monday3" class="dateTime">
<div class="day">Monday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday3" class="dateTime">
<div class="day">Tuesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday3" class="dateTime">
<div class="day">Wednesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday3" class="dateTime">
<div class="day">Thursday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday3" class="dateTime">
<div class="day">Friday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday3" class="dateTime">
<div class="day">Saturday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday3" class="dateTime">
<div class="day">Sunday</div>
<div class="time">10am - 10pm</div>
</div>

You can add multiple classes to an element by separating them by spaces like so: class="dateTime monday. In css you select classes by using the dot notation .monday and you select an ID by using an octothorp like so#monday3. jQuery uses css selectors as well so you do the same thing in jQuery: $('.monday'). Check this helpful references. Almost any way you can select an element in css you can select an element in jQuery. w3schools.com/cssref/css_selectors.asp — Khauri
– Khauri, Commented Jul 23, 2017 at 13:17

mplungjan · Accepted Answer · 2017-07-23 13:19:18Z

You mean

$(".dateTime").each(function() {
  $(this).addClass(this.id.slice(0, -1).toLowerCase());
  console.log(this.className)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="Monday3" class="dateTime">
  <div class="day">Monday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday3" class="dateTime">
  <div class="day">Tuesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday3" class="dateTime">
  <div class="day">Wednesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday3" class="dateTime">
  <div class="day">Thursday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday3" class="dateTime">
  <div class="day">Friday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday3" class="dateTime">
  <div class="day">Saturday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday3" class="dateTime">
  <div class="day">Sunday</div>
  <div class="time">10am - 10pm</div>
</div>

Nitin · Accepted Answer · 2017-07-23 14:23:10Z

0

Didn't understand exact what you want but you can use class in html like this and need to update javascript too for this. HTML Code:

<div class="dateTime Monday3">
<div class="day">Monday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div class="dateTime Tuesday3">
<div class="day">Tuesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div class="dateTime Wednesday3">
<div class="day">Wednesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div class="dateTime Thursday3">
<div class="day">Thursday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div class="dateTime Friday3">
<div class="day">Friday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div class="dateTime Saturday3">
<div class="day">Saturday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div class="dateTime Sunday3">
<div class="day">Sunday</div>
<div class="time">10am - 10pm</div>
</div>

JavaScript Code:

var currentDay3 = weekday3[now3.getDay()];
var currentDayID3 = "." + currentDay3; //gets todays weekday and turns it into class
$(currentDayID3).toggleClass("today");

Let me know if this work for you.

edited Jul 23, 2017 at 14:23

answered Jul 23, 2017 at 13:26

Nitin

485 bronze badges

1 Comment

mplungjan Over a year ago

var currentDayID3 = "." + currentDay3; //gets todays weekday and turns it into id - that comment is incorrect

Collectives™ on Stack Overflow

How to convert multiple IDs to a class?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related