Question

我有一个数据表，其结构如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers0">12345</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers1">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers2">4566</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers3">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers4">2566</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers5">4566"</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers6">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers7">12345</td>
      <td></td>
    </tr>
  </tbody>
</table>

我想对ID从“ invNumbers”开始的元素中存在的唯一值进行计数。重复值仅应计数一次。所以这里的输出应该是计数= 3。因为我只有3个唯一值，即12345、4566、2566。

Answer 1

您可以尝试这样的事情：

var arr = $('td[id^=invNumbers]').map(function() {
  return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
  return a.indexOf(v) === i
});

演示

var arr = $('td[id^=invNumbers]').map(function() {
  return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
  return a.indexOf(v) === i
});
console.log(unique);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers0">12345</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers1">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers2">4566</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers3">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers4">2566</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers5">4566</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers6">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers7">12345</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

有3个版本

带有粗箭头的ES6
具有功能的ES2015
应从IE8左右运行的旧版JS

const uniqueCount = [...document.querySelectorAll("td[id^=invNumbers]")]
  .reduce((acc, cur) => {
    const val = cur.textContent;
    if (!acc.includes(val)) acc.push(val);
    return acc;
  }, []).length;
console.log(uniqueCount)

// no fat arrows =>

const uniqueCount1 = [...document.querySelectorAll("td[id^=invNumbers]")]
  .reduce(function(acc, cur) {
    const val = cur.textContent;
    if (!acc.includes(val)) acc.push(val);
    return acc;
  }, []).length;
console.log(uniqueCount1)


// Legacy  - not ES2015 or ES6

var cells = document.querySelectorAll("td[id^=invNumbers]"); // supported since IE9 or so
var arr = [];
for (var i = 0; i < cells.length; i++) {
  var val = cells[i].innerText;
  if (arr.indexOf(val) ===-1) arr.push(val);
}
console.log(arr.length)

<table>
  <tbody>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers0">12345</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers1">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers2">4566</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers3">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>ABC</td>
      <td></td>
      <td id="invNumbers4">2566</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>GHI</td>
      <td></td>
      <td id="invNumbers5">4566</td>
      <td></td>
    </tr>
    <tr>
      <td>MNO</td>
      <td></td>
      <td id="invNumbers6">12345</td>
      <td></td>
    </tr>
    <tr>
      <td>STU</td>
      <td></td>
      <td id="invNumbers7">12345</td>
      <td></td>
    </tr>
  </tbody>
</table>

在数据表中使用正则表达式获取元素的唯一值计数

2 个答案: