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

Question

我有多个数据属性为cell-pos的<td>元素，设置为不同的值，如下代码所示：

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);
}
}
}

如果我想检索一个单元格位置值为[10，10]的<td>元素，我该如何进行？我知道使用.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()进行比较适用于您所描述的简单数组，但如果数据值变得更复杂，则可能需要重新编写比较代码。