Question

这是我表格的一部分

<table>
  <tr>
    <td>jack</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>james</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>john</td>
    <td>20</td>
    <td>450</td>
  </tr>
</table>

我的jQuery代码看起来像这样

var toShow = [
  "jack",
  "john"
];

var addClass = [
  "jack"
];


$('tr:contains(toShow)').remove();
$('tr:contains(addClass)').addClass("done");

目标是与我的表比较显示数组。如果字符串不存在，请用它删除tr元素。如果我的表匹配addClass中的item而不是add class。

我不确定为什么我的代码不起作用。结果应从表中删除最后一个tr元素，并首先添加类.done

Answer 1

试试这个

var toShow = [
  "jack",
  "john"
];

var addClass = [
  "jack"
];

toShow.forEach( function(item){
  $('tr:contains(' + item + ')').remove();
});

addClass.forEach( function(item){
   $('tr:contains(' + item + ')').addClass("done");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>jack</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>james</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>john</td>
    <td>20</td>
    <td>450</td>
  </tr>
</table>

由于addClass数组项已经从DOM中删除，因此您看不到任何正在添加的类。

Answer 2

我不确定为什么我的代码不起作用。

由于您确实要求其查找文字toShow，因此您未使用toShow对象中的值。

为此，如果要使用:contains，请使用字符串连接;要完成所有值，您需要使用多重选择器。

$('tr:contains(' + toShow.join('), tr:contains(') + ')').remove();

...使用您的示例创建此选择器字符串：

$('tr:contains(jack), tr:contains(john)').remove();

当然，循环遍历数组并单独处理每个条目，再次使用字符串连接。

jQuery匹配表与数组

2 个答案: