如何根据数据属性获取特定的 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() {&nbsp; let cellpos = $(this).data('cell-pos');&nbsp; 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()比较适用于您所描述的简单数组，但如果您的数据值变得更加复杂，您可能需要重新编写比较代码。