如何根据数据属性获取特定的 HTML 元素 (jQuery)

Question

我有多个<td带有 data 属性的 > 元素cell-pos，设置为不同的值，如下代码所示：  setUpGrid($gameArea) {     for (let rowIdx = 0; rowIdx < this.board.gridSize; rowIdx++) {       const $tr = $("<tr>");      $gameArea.append($tr);       for (let colIdx = 0; colIdx < this.board.gridSize; colIdx++) {         const $td = $("<td>");        $td.data("cell-pos", [rowIdx, colIdx]);        $tr.append($td);      }    }  }如果我想检索<td>cell-pos 值为 [10,10] 的元素，我该怎么做？我知道.attr()我可以只使用选择器，$('td[data-cell-pos="[10,10]"]')但在这里我使用设置数据属性.data()，因为我不想直接在 HTML 标记上公开数据属性值（这就是所做的.attr()）任何帮助表示赞赏，谢谢！

Answer 1

一种方法是找到所有匹配的元素，然后过滤它们的cell-pos数据值是否相同。例如（使用几个divs）：

$('#div1').data('cell-pos', [5, 4]);

$('#div2').data('cell-pos', [4, 5]);

console.log($('div').filter(function() {

  let cellpos = $(this).data('cell-pos');

  return JSON.stringify(cellpos) === JSON.stringify([4, 5]);

}).text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1">Div 1</div>

<div id="div2">Div 2</div>

请注意，使用JSON.stringify()比较适用于您所描述的简单数组，但如果您的数据值变得更加复杂，您可能需要重新编写比较代码。