count the active classes on both choices - javascript

I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.
Hope you help me thanks.
$('.numChoice > .col-md-5ths > .num').on("click", function() {
var idx = $(this).parent().index();
var act = $(this).is(".active");
var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
$(this).toggleClass('active');
$otherElement.toggleClass('disabled', !act);
var len1 = $otherSide.find('.active').length;
var len2 = $(this).closest('.numChoice').find('.active').length;
console.log('selection1: ' + len1, 'selection2: ' + len2);
});
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>


If I understand, you want to count the active classes for the first row against the second row:
const firstRowActiveLabels = $('.numChoice.first-row .active').length;
const secondRowActiveLabels = $('.numChoice.second-row .active').length;
.numChoice.first-row means: get the class that has numChoice and has first-row classes.
.active means: and get the inner elements that has active class.
$('.numChoice > .col-md-5ths > .num').on("click", function() {
var idx = $(this).parent().index();
var act = $(this).is(".active");
var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
$(this).toggleClass('active');
$otherElement.toggleClass('disabled', !act);
var len1 = $('.numChoice.first-row .active').length;
var len2 = $('.numChoice.second-row .active').length;
console.log('selection1: ' + len1, 'selection2: ' + len2);
});
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>


I've rewritten your JS part a bit. Please check if it's what you're looking for.
$('.numChoice .num').on("click", function() {
if ($(this).hasClass('disabled')){
return false; // let's skip disabled items?
}
var idx = $(this).parent().index();
$(this).toggleClass('active');
var act = $(this).is(".active");
const $others = $(this).closest(".numChoice").siblings();
$others.each(function(){
const $opposite = $(this).find('.num').eq(idx);
$opposite.removeClass('active').toggleClass('disabled', act);
});
updateCounts();
});
function updateCounts(){
const len1 = $('.first-row .active').length;
const len2 = $('.second-row .active').length;
console.clear();
console.log('selection1: ' + len1, 'selection2: ' + len2);
}
.numChoice {
display: block;
}
.num {
width: 20px;
height: 20px;
background-color: #DDD;
text-align: center;
float: left;
cursor: pointer;
}
.num.active {
color: green;
}
.num.disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="numChoice first-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
<br><br>
<div class="numChoice second-row">
<div class="col-md-5ths">
<div class="num">1</div>
</div>
<div class="col-md-5ths">
<div class="num">2</div>
</div>
<div class="col-md-5ths">
<div class="num">3</div>
</div>
<div class="col-md-5ths">
<div class="num">4</div>
</div>
<div class="col-md-5ths">
<div class="num">5</div>
</div>
</div>
</div>

Related

Ascending the div based on rows

I have a list of divs with data. Each div contains a custom data. Each div have data like a table rows and column, but it shows in descending order, I want to show it in ascending order, for example the div which have multiple rows with data, it come first and the div that have less rows come second and so on in dynamically.
The whole process should be dynamically, for example if any div have many rows it come first and the less rows div come to next and so on, the whole process is based on data entry.
Below you can find an example of what I am thinking of, yet it's not working.
image example for the better understanding
.justrow {
display: flex;
justify-content: space-evenly;
}
.table {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table2 {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table3{
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
<div class="justrow">
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table3">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
</div>
<div class="table2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>

You stated that the data is retrieved from a database, so you know how many rows there are in a table and can define a style="--row-count: ..." with each table retrieved.
As each main .table is a flexbox item, you can use the table row count to modify the table flexbox order property and easily change its position inside a .justrow, without Javascript manipulation:
order: 0 or unset -> place table in document creation order
order: negative or lower value -> place table before tables with higher order values
order: positive or higher value -> place table after tables with lower order values
MDN Reference: Ordering flex items
Given the above you can use custom variables for .table --row-count and .justrow --order-sign to set the required sort order for a row of tables.
Essentially, the row count determines the position of a table inside a row and the sign determines the sort direction.
The --order-sign can be defined for each .justrow individually, or just once in :root or body for all .justrow elements (for ease of the demo, in the snippet I used body to define --order-sign).
The equation is easy to understand: order = order-sign x row-count
.justrow {
--order-sign: -1
/*
-1 - Ascending order
0 - no (or document) order
1 - Descending order
*/
}
.table {
order: calc(var(--order-sign) * var(--row-count));
}
<div class="justrow">
<div class="table" style="--row-count: X">table rows</div>
<div class="table" style="--row-count: N">table rows</div>
</div>
In the snippet I added a second two-row table and a few radio buttons to toggle between sort orders:
/* ADDED */
body { --order-sign: 0 }
.table {
order: calc(var(--order-sign) * var(--row-count));
}
/**/
.justrow {
display: flex;
justify-content: space-evenly;
/* added for demo */
flex-flow: row wrap;
gap: 1rem;
}
.table {
flex: 1; /* added for demo */
width: 20%; /* from 25% for demo */
display: table;
border: 1px solid #ccc;
height: 100%;
}
.header {
display: table-header-group;
font-weight: bold;
}
.rowGroup {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
fieldset { margin: 0; margin-bottom: 1rem; }
[red] { color: red; font-weight: bold }
<fieldset>
<legend> Sort Order </legend>
<label for="ord1" title="document order">
<input id="ord1" class="radio" type="radio" name="group" checked
oninput="document.body.style.setProperty('--order-sign', 0);">
(None)
</label>
<label for="ord2" title="most rows first">
<input id="ord2" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', -1);">
(Asc)
</label>
<label for="ord3" title="least rows first">
<input id="ord3" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', 1);">
(Des)
</label>
<br><br>
<span>MDN Reference: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></span>
</fieldset>
<div class="justrow">
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 1</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 8">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 2</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 5">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 3</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 4</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>

How to Select Elements Between A range in jQuery

Can you pls take a look at this demo and let me know how I can remove .d-none class from element which located between two given numbers? Foe example I just want to show .box which are between 1 to 6 and hide all other boxes
$("button").on("click", function(e) {
var id = $(this).attr('id');
if (id == 1) {
$('.box').addClass('d-none');
// Now only display boxes from 1 to 6
}
if (id == 2) {
$('.box').addClass('d-none');
// Now only display boxes from 10 to 26
}
if (id == 3) {
$('.box').addClass('d-none');
// Now only display boxes from 12 to 36
}
});
.box {
background: gold;
height: 60px;
width: 60px;
color: black;
text-align: center;
line-height: 50px;
float: left;
margin: 2px;
}
.d-none {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

You can do it easily using jquery slice() method. The slice() method helps us to reduce the set of matched elements to a subset specified by a range of indices, which is exactly we need here.
$("button").on("click", function(e) {
var id = $(this).attr('id');
$('.box').addClass('d-none');
if (id == 1) {
$('.box').slice(1,7).removeClass('d-none');
// Now only display boxes from 1 to 6
}
if (id == 2) {
$('.box').slice(10,27).removeClass('d-none');
// Now only display boxes from 10 to 26
}
if (id == 3) {
$('.box').slice(12,37).removeClass('d-none');
// Now only display boxes from 12 to 36
}
});
.box {
background: gold;
height: 60px;
width: 60px;
color: black;
text-align: center;
line-height: 50px;
float: left;
margin: 2px;
}
.d-none {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

An additional solution if you have to check for the <div> content:
$("button").on("click", function(e) {
var id = parseInt($(this).attr('id')); // get button id to decide
// if you need to determine the range directly from the button content
// you should here extract the start and end value and use it
// afterwards for the if. In this case you can omit fixed ranges and
// the switch statement.
// var start = parseInt($(this).html().split(" - ")[0]);
// var end = parseInt($(this).html().split(" - ")[1]);
$('.box').addClass('d-none'); // hide all divs
var func = function() {
var val = parseInt($(this).html()); // get div content value
// use the button start and end values instead of the switch below
// if(val >= start && val <= end) {
// $(this).removeClass('d-none');
// }
switch(id) {
case 1:
if(val >= 1 && val <= 6) { // show only ids for button 1
$(this).removeClass('d-none');
}
break;
case 2:
if(val >= 10 && val <= 26) { // show only ids for button 2
$(this).removeClass('d-none');
}
break;
case 3:
if(val >= 12 && val <= 36) { // show only ids for button 3
$(this).removeClass('d-none');
}
break;
}
};
$('.box').each(func);
});
.box {
background: gold;
height: 60px;
width: 60px;
color: black;
text-align: center;
line-height: 50px;
float: left;
margin: 2px;
}
.d-none {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<br />
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>
Explanation in the code!

In plain es20xx
{
// helper to determine if number is between min and max
const between = (number, min, max) => number >= min && number <= max;
document.addEventListener("click", showSelection);
function showSelection(evt) {
// act only if clicked element contains [data-between] ('event delegation')
if (evt.target.dataset.between) {
// determine min and max based on [data-between]
const minMax = evt.target.dataset.between.split(",").map(Number);
[...document.querySelectorAll(".box")]
.forEach(box => {
// determine what to do with box.classList based on
// number between min and max
const addOrRemove = between(+box.textContent, minMax[0], minMax[1]) ?
"remove" : "add";
// do it
box.classList[addOrRemove]("d-none");
});
}
}
}
.box {
background: gold;
height: 60px;
width: 60px;
color: black;
text-align: center;
line-height: 50px;
float: left;
margin: 2px;
}
.d-none {
display: none;
}
<button data-between="1,6">1 - 6</button>
<button data-between="10,26">10 - 26</button>
<button data-between="12,36">12 - 36</button>
<button data-between="0,40">all</button>
<br>
<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

Use .removeClass() on the elements along with slice().
Call your selector, then slice the elements index adding the elements you wish to show and then removeClass('d-none').
Also, get the values of your elements attr('id'), slice that info and grab the actual values set in the buttons. Adjust key value starting at 0 with -1 and it is more dynamic.
$("button").on("click", function(e) {
var id = $(this).attr('id');
var opt1 = $('#1').text().split(' - ');
var opt2 = $('#2').text().split(' - ');
var opt3 = $('#3').text().split(' - ');
if (id == 1) {
$('.box').addClass('d-none');
$('.box').slice(opt1[0]-1,opt1[1]).removeClass('d-none');
}
if (id == 2) {
$('.box').addClass('d-none');
$('.box').slice(opt2[0]-1,opt2[1]).removeClass('d-none');
}
if (id == 3) {
$('.box').addClass('d-none');
$('.box').slice(opt3[0]-1,opt3[1]).removeClass('d-none');
}
if (id == 4) {
$('.box').removeClass('d-none');
}
});
.box {
background: gold;
height: 60px;
width: 60px;
color: black;
text-align: center;
line-height: 50px;
float: left;
margin: 2px;
}
.d-none {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="1">1 - 6</button>
<button id="2">10 - 26</button>
<button id="3">12 - 36</button>
<button id="4">Show All</button>
<br />
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
<div class="box">31</div>
<div class="box">32</div>
<div class="box">33</div>
<div class="box">34</div>
<div class="box">35</div>
<div class="box">36</div>
<div class="box">37</div>
<div class="box">38</div>
<div class="box">39</div>
<div class="box">40</div>

Multiply two fields in each sections with jQuery or JavaScript

Here is my code:
$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('.tinggi' + count).val() * $('#lebar' + count).val();
console.log(luas);
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = document.querySelector('input[name="color"]:checked').value;
var color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML;
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>
When I press COUNT button, the code working fine, all the result placed well on where I want it to be shown. But I still missing one feature, append the item class. When I append or add or clone item class, the calculation is not working due to the id or name of each input are same. I tried using [] for the input but still don't know how to count it and place all the result each just like the original element.

$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('#tinggi' + count).val() * $('#lebar' + count).val();
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = $('input[name=color]').css('backgroundColor');
var color_title =$('input[name=color] ~ label h4').text();
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>

Class does exist but is not found

I am absolutely baffled bu this. Here's my CSS:
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">​C</div>
<div class="letter">​​D</div>
<div class="letter">​E</div>
<div class="letter">F</div>
<div class="letter">​G</div>
<div class="letter">​H</div>
<div class="letter">​​I</div>
<div class="letter">J</div>
<div class="letter">​​K</div>
<div class="letter">L</div>
<div class="letter">​M</div>
<div class="letter">​N</div>
<div class="letter">O</div>
<div class="letter">​P</div>
<div class="letter">​Q</div>
<div class="letter">​R</div>
<div class="letter">​S</div>
<div class="letter">T</div>
<div class="letter">​U</div>
<div class="letter">V</div>
<div class="letter">​W</div>
<div class="letter">​X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>
When I click A, B, or T everything is fine; The alert shows the number of elements that have the classname that I'm looking for and displays them. But when I click C, K or W, the elements, although they clearly exist, are not found.
I haven't got the palest shade of a clue as to why this happens.

You've got a lot of Unicode zero-width space characters in your HTML source, and in particular there's one at the beginning of the text for the "C" box. When you access the .text() of the element, therefore, it's not just "C".

i just inspect the element. here i found the solution:

From #Pointy anwswer, you can remove these zero space, without changing the view. The srcipt to remove these space is .replace(/\u200B/g,'');
So your script will be like int his snippet
$(window).load(function () {
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function () {
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = '' + $(this).text().replace(/\u200B/g,'');
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">​C</div>
<div class="letter">​​D</div>
<div class="letter">​E</div>
<div class="letter">F</div>
<div class="letter">​G</div>
<div class="letter">​H</div>
<div class="letter">​​I</div>
<div class="letter">J</div>
<div class="letter">​​K</div>
<div class="letter">L</div>
<div class="letter">​M</div>
<div class="letter">​N</div>
<div class="letter">O</div>
<div class="letter">​P</div>
<div class="letter">​Q</div>
<div class="letter">​R</div>
<div class="letter">​S</div>
<div class="letter">T</div>
<div class="letter">​U</div>
<div class="letter">V</div>
<div class="letter">​W</div>
<div class="letter">​X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>

Your problem is also solved if you copy my letter-header div here: these are free of NULL bytes.
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>

Removed unwanted Unicode characters.. check below snippet
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>

Highlight current day on a <div> table using javascript

Hello I am trying to highlight the current day in a <Div> table (using css and jQuery) but can't wrap my head around it (I don't want to use php because it must be dynamic)
This is part of what I have done.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel="shortcut icon" href="../themes/images/logo-180x178-52.png" type="image/x-icon">
<link rel="STYLESHEET" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="STYLESHEET" href="../themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Rooster week 15</title>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: orange;
font-weight: bold;
}
.rTableBody {
display: table-row-group;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: orange;
}
.rTableCell,
.rTableHead {
display: table-cell;
}
.cZondag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
.cMaandag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
//.cDinsdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cWoensdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cDonderdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cVrijdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cZaterdag { display: table-row; background-color: lightgreen; font-weight: bold;}
</style>
</head>
<body>
<script>
function myFunction() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Zondag";
weekday[1] = "Maandag";
weekday[2] = "Dinsdag";
weekday[3] = "Woensdag";
weekday[4] = "Donderdag";
weekday[5] = "Vrijdag";
weekday[6] = "Zaterdag";
var n = weekday[d.getDay()];
var nTable = document.getElementById('maandag');
// document.write(nTable); // debugging only
}
myFunction()
</script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>
</body>
</html>
The code is generated by a VBA script in Excel where the data comes from and is uploaded to a server automatically.
It is supposed to be running on a phone screen (fullscreen)

Please note my code will only highlight when the table contains a date around now.
function pad(num) {
return String("0"+num).slice(-2);
}
$(function() {
var d = new Date(); // test with new Date(2016,3,14); JS months start at 0
var ddmm = ""+pad(d.getDate())+"-"+pad(d.getMonth()+1);
$(".rTableRow:contains('"+ddmm+"')").addClass("highlight");
});
.highlight { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>

I am not too sure What is Current date field, so I assume that it is a first record. you can do it without jquery. below are code sample
/*Only work hover over element*/
.rTableRow > div:first-child:hover{
background-color:red; }
/* work all the time*/
.rTableRow > div:first-child{
background-color:red; }

Categories