jquery - 与上面相同时隐藏内容

Question

给定一个像这样的简单表格:

当文本与上行中的文本相同时，我想隐藏该文本。

我已经尝试过这个...但我对 JQuery 真的很陌生。

$(document).ready(function() {
  let previous = "*";
  $('.nodup').each(function(i, obj) {
    if (obj.html() == previous) {
      $(obj).hide();
    } else {
      previous = obj.html(); // "reset" the previous value?
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="nodup">one</td> show this td
    <td>5</td>
    <td>7</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">one</td> hide this td
    <td>6</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="nodup">one
      <td> hide this td
        <td>3</td>
        <td>8</td>
        <td>3</td>
  </tr>
  <tr>
    <td class="nodup">two</td> show this td
    <td>7</td>
    <td>3</td>
    <td>1</td>
  </tr>
</table>

所以最终会是这样的......

one    5    7    3
       6    9    1
       3    8    3
two    7    3    1

等等。

Answer 1

一种选择是使用 filter 循环遍历 $(".nodup") 元素。如果文本与 temp 变量相同(意味着与前一个相同)，则返回 true。为 temp 分配新值，否则返回 false。

将 html 设置为空字符串并且不删除它。

var temp = null;
$(".nodup").filter(function(i, o) {
  var text = $(this).text().trim();
  if (text === temp) return true;

  temp = text;
  return false;
}).html("");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="nodup">one</td>
    <td>5</td>
    <td>7</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">one</td>
    <td>6</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="nodup">one</td>
    <td>3</td>
    <td>8</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">two</td>
    <td>7</td>
    <td>3</td>
    <td>1</td>
  </tr>
</table>