如何在元素中查找数组值并向其添加 jquery 类答案

【问题标题】：how to find array values inside an element and add jquery class to it如何在元素中查找数组值并向其添加 jquery 类
【发布时间】：2018-12-14 13:41:22
【问题描述】：

我试图在一个元素中查找数组值，然后向它添加一个 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>

提前致谢。

【问题讨论】：

从 sn-p 的格式中可以看出，您的表格 HTML 已损坏 - 您缺少 </td>
... 和 <tr/> 必须替换为 </tr>。
How do I select a span containing a specific text value, using jquery?的可能重复
@RoryMcCrossan HTML 允许在 <td> 元素上省略结束标记，即使天真的整洁工具不知道这一点:)。见stackoverflow.com/q/4020374/215552
@HereticMonkey 谢谢，不知道这一点。不过，我认为以这种方式编写代码是一种糟糕的做法。无论哪种方式，OP 的代码都不正确，因为它们有多余的 <td>，而 </td> 应该是。

标签： jquery arrays loops

【解决方案1】：

这里有几个问题。首先，您的 HTML 已损坏。 td 元素需要用</td> 正确关闭。那么<tr /> 需要是</tr>。

其次，您的 for 循环语法不正确。 numbers 是对数组的引用，因此将其用作迭代器会导致奇怪的行为。相反，您需要定义一个整数并增加它。然后，您可以使用该整数在for 循环中按索引从numbers 中检索值。

最后，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>

【讨论】：

关闭标签对于 html5 中的 <tr> 和 <td> 是可选的 -- "如果 td 元素后面紧跟一个 td 或 th 元素，或者如果有父元素中不再有内容。” w3.org/TR/html5/syntax.html
@Luke 谢谢没有意识到这一点。然而，在没有结束标签的情况下编写代码是一个糟糕的主意，IMO。无论哪种方式，OP 的代码都不正确，因为它们有多余的 <td>，而 </td> 应该是。
哇！！！！非常感谢 Rory 的详细解释和解决方案。它工作得很好。我面临的唯一一个问题是，当数字有 [10, 20, 30] 时，它也会突出显示 [1, 2, 3]。你能对此提出建议吗？除此之外，它就像一个魅力再次感谢你:)
@pv619 我无法复制这种行为 - 上面的 sn-p 只会突出显示精确匹配的值，因此 10 不会匹配 100 或 1000，例如
是我，因为我试图从 URL 参数中获取值并尝试将其与元素匹配。再次感谢您的帮助:)

【解决方案2】：

正如 Rory 所说，确保正确关闭所有元素。

试试这个代码。它过滤掉所有具有指定数字的元素作为内部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');
}

如您所见，您必须迭代数组以获取指定值。

【讨论】：

它有效 :) 谢谢 Mike 的帮助，非常感谢。

【解决方案3】：

如果你像我一样喜欢小巧、可重复使用的功能，我会这样做：

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

【讨论】：

感谢卢克，感谢您的帮助，非常感谢 :)