与上述相同时隐藏内容

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

一种选择是使用$(".nodup")遍历filter元素。如果文本与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>