Trying to make selector dynamic with javascript/jquery

Question

Hello stackoverflow: I am trying to make the $('.TextBoxColors-') part of my code dynamic.
I am looking for the i variable in the for-loop to assign this value depending on the if.
I have tried many things like $('.TextBoxColors-${i}'), $('.TextBoxColors-').value(i) as in $('.TextBoxColors-').value(i).css('background-color', 'green'),
but nothing works so far.

This is the javascript/jquery:

let timeArray   = ["9","10", "11", "12", "13", "14", "15", "16", "17"]
let currentTime = parseInt(moment().format("H"));

for (i=0; i< 9; i++) {
  if (currentTime < parseInt(timeArray[i])) {
    $('.TextBoxColors-9').css('background-color', 'gray')
    $('.TextBoxColors-10').css('background-color', 'gray')
    $('.TextBoxColors-11').css('background-color', 'gray')
    $('.TextBoxColors-12').css('background-color', 'gray')
  }
  if (currentTime == timeArray[i]) {
    $('.TextBoxColors-13').css('background-color', 'Tomato')
  }
  
  if (currentTime > timeArray.indexOf("currentTime",currentTime)) {

    $('.TextBoxColors-14').css('background-color', 'green')
    $('.TextBoxColors-15').css('background-color', 'green')
    $('.TextBoxColors-16').css('background-color', 'green')
    $('.TextBoxColors-17').css('background-color', 'green')
  }
}

These are two of the divs where I want this to happen:

<!-- 2:00PM-->
<div class="input-group input-group-lg field-size Timer" >
  <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-lg">2 PM</span>
  </div>

  <textarea type="text" class="TextBoxColors-14 form-control" aria-label="2:00 PM"     
    aria-label describedby="inputGroup-sizing-sm"></textarea>
  
  <button class="btn btn-primary" type="button" id="saveToDo-5"><i class="fa fa-floppy-o" style="font-size:18px;"></i>
  </button>
</div>

<!-- 3:00PM-->
<div class="input-group input-group-lg field-size" >
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">3 PM</span>
  </div>
  <textarea type="text" class="TextBoxColors-15 form-control" aria-label="3:00 AM"
    aria-describedby="inputGroup-sizing-sm"></textarea>
  
  <button class="btn btn-primary" type="button" id="saveToDo-0">
    <i class="fa fa-floppy-o" style="font-size:18px;"></i>
  </button>
</div>

Please do not use w3schools to learn JS. Anyway, you don't want to use classnames (or IDs) with running numbers, that's bad practice and basically never necessary. You can use $('.TextBoxColors').eq(9) instead, this will select all elements of the class, then pick the 10th element. — user5734311
– user5734311, Commented Mar 15, 2021 at 18:26
Thanks for the suggestion, Chris. I am just one week into JS and jQuery. So, what you just posted $('.TextBoxColors').eq(9) is something I am still to get it to make sense to me. Thanks! — Willie
– Willie, Commented Mar 15, 2021 at 18:41
Here's example code: jsfiddle.net/kq5owf6y (it's quite simple: if a selector matches more than one element, jQuery returns a list of elements. You can use eq() to narrow it down to a single element) — user5734311
– user5734311, Commented Mar 15, 2021 at 18:46

David · Accepted Answer · 2021-03-15 18:26:26Z

2

This is close:

$('.TextBoxColors-${i}')

But for template string literals you need to use back-ticks, not single-quotes:

$(`.TextBoxColors-${i}`)

Alternatively you can just concatenate the value to the string:

$('.TextBoxColors-' + i)

answered Mar 15, 2021 at 18:26

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Willie Over a year ago

Great! The second one did it for me! Thanks! How do I choose this as my answer?

Collectives™ on Stack Overflow

Trying to make selector dynamic with javascript/jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related