javascript - 如何通过引用 jQuery 中的内容和数组来正确设置选择器

Question

我创建了 html 表，我想通过引用 arr 和其内容来添加类

当我设置选择器时，我遇到了两个问题。

①$( "td:contains('2')") 选择器选择 2,12,22・・・・ 我想要的结果是只选择 2

② 我准备了arr，我想用arr写得更简单。

我想要的结果是添加 arr 单元格类。

有简单的方法可以实现吗？

谢谢

const arr=[1,2,10,11,14]

$( "td:contains('1')" ).addClass('aqua')
$( "td:contains('2')" ).addClass('aqua')
$( "td:contains('10')" ).addClass('aqua')
$( "td:contains('11')" ).addClass('aqua')
$( "td:contains('14')" ).addClass('aqua')

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  cursor: pointer;
}

div {
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>


<script>
  let html = ''
  html += '<table>';
  let i = 0;
  for (let w = 0; w < 10; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;
</script>

Answer 1

:contains 无法搜索完全匹配的内容，它只会搜索元素是否在某处包含文本。如果您希望文本完全匹配，请在选择元素后过滤它们是否为.text() === '2':

const arr = [1, 2, 10, 11, 14].map(String);

/*
const getExactMatch = text => function() { return $(this).text() === text };
$("td").filter(getExactMatch('1')).addClass('aqua');
$("td").filter(getExactMatch('2')).addClass('aqua');

or:
*/

$("td")
  .filter(function() { return arr.includes($(this).text()); })
  .addClass('aqua');

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  cursor: pointer;
}

div {
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>


<script>
  let html = ''
  html += '<table>';
  let i = 0;
  for (let w = 0; w < 10; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;
</script>