属性包含确切的数字选择器，因此找到了 3 但没有找到 13 或 23

Question

在表格中有一个部分显示每组 4 周 div。见下方代码

<div class="form-check" data-weeknr="1,2,3,4"></div>
<div class="form-check" data-weeknr="5,6,7,8"></div>
<div class="form-check" data-weeknr="9,10,11,12"></div>
<div class="form-check" data-weeknr="13,14,15,16"></div>
<div class="form-check" data-weeknr="17,18,19,20"></div>
... This continues until it reaches 
<div class="form-check" data-weeknr="49,50,51,52"></div>

我有一个代码可以通过变量 weekno 获取当前周，所以今天 console.log(weekno); returns：3

我想将 class current 添加到数据属性 data-weeknr.

中具有 weekno 的 .form-check

所以我尝试使用包含 select 或说明的属性，但我需要它比这些说明允许的更深入。

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

因为上面的 jQuery 代码将在控制台中 return 数字 7 因为它现在抓取每个 .form-check 有一个 3 初始化。所以它不仅抓取了 3，而且抓取了 13,23,[30,31,32],[33,34,35,36],[37,38,39],43，总共 7 组。

那么我怎样才能改变这一行来做两件事：

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

如何合并变量 weekno，我怎样才能正确转义以便允许使用 var？我怎样才能使它 select 只有数字 3？

Answer 1

仅选择值为 3 的最简单方法是将分隔符也添加到数据属性的开头和结尾，例如

<div class="form-check" data-weeknr=",1,2,3,4,"></div>

然后选择分隔符进入搜索，因为data-weeknr*在数据属性的某处搜索字符串。

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

Answer 2

一种方法是使用 $.inArray 。所以，你可以使用 split(",") 这会给你数组然后比较数组中是否存在 week 值，如果是，则在其中添加 class。

演示代码 :

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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check" data-weeknr="1,2,3,4">A</div>
<div class="form-check" data-weeknr="5,6,7,8">B</div>
<div class="form-check" data-weeknr="9,10,11,12">C</div>
<div class="form-check" data-weeknr="13,14,15,16">D</div>
<div class="form-check" data-weeknr="17,18,19,20">E</div>
<div class="form-check" data-weeknr="49,50,51,52">F</div>

Answer 3

我已经创建了以下示例代码来满足您的要求：

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');
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check" data-weeknr="1,2,3,4"></div>
<div class="form-check" data-weeknr="5,6,7,8"></div>
<div class="form-check" data-weeknr="9,10,11,12"></div>
<div class="form-check" data-weeknr="13,14,15,16"></div>
<div class="form-check" data-weeknr="17,18,19,20"></div>
<div class="form-check" data-weeknr="49,50,51,52"></div>

属性包含确切的数字选择器，因此找到了 3 但没有找到 13 或 23

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

javascript

jquery

attributes

selector