Как получить указанный c HTML элемент на основе атрибута данных (jQuery)

Question

У меня есть несколько <td> элементов с атрибутом данных 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> с значение ячейки [10,10], как бы я go сделал это? Я знаю, с помощью .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() для сравнения будет работать для простого массива, такого как вы описали, но вам может потребоваться переработать код сравнения, если ваши данные значение становится более сложным.