jquery - 如何在元素内查找数组值并向其添加 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 被破坏了。 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>