Как правильно установить селектор, ссылаясь на его содержимое и массив в jQuery

Question

Я создаю html таблицы, и я хотел бы добавить класс, ссылаясь на arr и its content

Когда я устанавливаю селектор, у меня возникают 2 проблемы.

① $( "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 не может найти точное совпадение, он просто будет искать, если элемент содержит текст где-то. Если вы хотите, чтобы текст совпадал точно, после выбора элементов, filter их, в зависимости от того, *

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>