как найти значения массива внутри элемента и добавить к нему класс jquery

Question

Я пытаюсь найти значения массива внутри элемента, а затем добавить к нему класс css.Моя техника неверна?Может кто-нибудь, пожалуйста, помогите мне.

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
for (numbers < 1; numbers <= 20; numbers++) {
  $('td').find(numbers).addClass('active');
}

td.active {
  color: #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1
      <td>
        <td>2
          <td>
            <td>3
              <td>
                <td>4
                  <td>
                    <td>5
                      <td>
                        <td>6
                          <td>
                            <td>7
                              <td>
                                <td>8
                                  <td>
                                    <td>9
                                      <td>
                                        <td>10
                                          <td>
                                            <tr/>
                                            <tr>
                                              <td>11
                                                <td>
                                                  <td>12
                                                    <td>
                                                      <td>13
                                                        <td>
                                                          <td>14
                                                            <td>
                                                              <td>15
                                                                <td>
                                                                  <td>16
                                                                    <td>
                                                                      <td>17
                                                                        <td>
                                                                          <td>18
                                                                            <td>
                                                                              <td>19
                                                                                <td>
                                                                                  <td>20
                                                                                    <td>
                                                                                      <tr/>
</table>

Заранее спасибо.

Answer 1

Как сказал Рори, убедитесь, что вы правильно закрыли все элементы.

Попробуйте этот код.Он отфильтровывает все элементы с указанными номерами в виде внутреннего html и устанавливает класс css.

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
for (var i = 0; i < numbers.length; i++) {
  $('td').filter(function() { 
    return $(this).html() == numbers[i];
  }).addClass('active');
}

Как видите, для получения указанных значений необходимо выполнить итерацию массива.

Answer 2

Если вам нравятся крошечные многократно используемые функции, как я, вот как я бы это сделал:

const activeNumbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];

function getNumberText($elt) {
    return parseInt($elt.text(), 10);
}

function isActiveNumber(n) {
    return activeNumbers.includes(n);
}

function updateActiveClass(elt) {
    const $elt = $(elt);
    const n = getNumberText($elt);
    $elt.toggleClass('active', isActiveNumber(n));
}

function highlightActiveCells(selector) {
    $(selector).find('td').each(function () { updateActiveClass(this); });
}

highlightActiveCells('table'); // or a better selector, like a class or id

Answer 3

Здесь есть несколько вопросов.Во-первых, ваш HTML не работает.Элементы td должны быть правильно закрыты с помощью </td>.Тогда <tr /> должно быть </tr>.

Во-вторых, ваш синтаксис цикла for неверен.numbers является ссылкой на массив, поэтому использование его в качестве итератора вызовет странное поведение.Вместо этого вам нужно определить целое число и увеличить его.Затем вы можете использовать это целое число для извлечения значений из numbers по индексу в цикле for.

Наконец, find() ожидает, что селектор будет искать дочерние элементы в пределах td.Вместо этого вам нужно использовать filter(), чтобы соответствовать текст каждой ячейки.Функция фильтра должна взять текст ячейки и использовать indexOf(), чтобы определить, находится ли это значение в содержимом массива.Также обратите внимание, что при использовании этого метода вам больше не нужен цикл for.Попробуйте это:

var numbers = [1, 2, 3, 7, 8, 9, 10, 16, 17, 18, 19, 20];
$('td').filter(function() {
  return numbers.indexOf(parseInt($(this).text(), 10)) != -1;
}).addClass('active');

td.active {
  color: #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>