attribute contains exact number selector so 3 is found but not 13 or 23

Question

In a form there is a section that shows groups of 4 weeks in each div. See the code below






... This continues until it reaches

I have a code that grabs the current week by the variable weekno so console.log(weekno); returns today: 3

I want to add a class current to the .form-check that has weekno in it's data-attribute data-weeknr.

So I tried to use the attribute contains selector instructions, but I need it to go deeper than these instructions allow.

$links = $(".formplate .form-check[data-weeknr*='3']");
console.log($links.length);

Because the above jQuery code will return in the console the number 7 due to the fact it now grabs every .form-check that has a 3 init. So it grabs not only 3 but also 13,23,[30,31,32],[33,34,35,36],[37,38,39],43 making the total of 7 groups.

So how can I change this line to do 2 things:

$links = $(".formplate .form-check[data-weeknr*='3']");

How to incorporate the variable weekno, how can I properly escape so that the var is allowed? And how can I make it select only the number 3?

user_1447675 · Answer

The esiest way for selecting only the one with a value of 3 is to add the separator as well to the start and end of the data attribute, like

Then take for selecting the separators into the search, because data-weeknr* seaches for a string somewhere in the data attribute.

$links = $(".formplate .form-check[data-weeknr*=',3,']");

user_10606400 · Answer

One way would be using $.inArray . So, you can use split(",") this will give you array then compare if the week value is there inside array if yes add class there.

Demo Code :

var week = '11';
var count = 0;
$(".form-check").each(function() { //loop through form check
  var data_ = $(this).data('weeknr').split(","); //get array using split
  //check week is in array
  if ($.inArray(week, data_) !== -1) {
    count++;
    $(this).addClass('current') //add class
  }
})
console.log("Length --" + count)

.current {
  color: red
}


A
B
C
D
E
F

user_8537893 · Answer

I have created the below example code for the fulfillment of your requirement:

var weekno = "3";
$(".form-check").each(function() {
    var dataWeeknr = $(this).attr('data-weeknr');
    if (dataWeeknr.indexOf(',') > -1) {
      var dataWeeknrArr = new Array();
      dataWeeknrArr = dataWeeknr.split(",");
      if(dataWeeknrArr.includes(weekno)) {
          $(this).addClass('current');
      }
    }
});

attribute contains exact number selector so 3 is found but not 13 or 23

3 Answers