Выбрать из всех элементов тот у которого есть нужный атрибут

Question

Есть одинаковые элементы, которые отличаются только значениями атрибутов. Мне надо найти тот, у которого есть атрибут, который я ищу.

Сделал так, но у меня в коде каждый раз написать так во первых очень много место занимает, во вторых он работает не так уж быстро.

Есть ли адекватные решения?

         
    $.each($('.boardfield__field'),function(){
         if($(this).attr('fieldrow')==2 && $(this).attr('fieldcol')==4){
          console.log('yes')
         }
    })

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="Game__board">
  <tr>...</tr>
  <tr>
    <td class="boardfield">...</td>
    <div class="boardfield">
      <div class="boardfield__field" fieldrow="2" fieldcol="1"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="2"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="3"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="4"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="5"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="6"></div>
      <div class="boardfield__field" fieldrow="2" fieldcol="6"></div>
    </td>
    <div class="boardfield">
      <div class="boardfield__field" fieldrow="1" fieldcol="1"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="2"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="3"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="4"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="5"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="6"></div>
      <div class="boardfield__field" fieldrow="1" fieldcol="6"></div>
    </td>
  </tr>
</div>
</body>
</html>

Answer 1

var row = 2;
var col = 4;
var $el = $(`.boardfield__field[fieldrow=${row}][fieldcol=${col}]`);
console.log($el.length? 'yes' : 'no');

Answer 2

Можно собрать такой объект для легкого доступа:

let map = (function() {
  
  let divs = document.querySelectorAll(".boardfield__field");
  let data = {};
  
  for (let i = 0; i < divs.length; i++) {
    let row = divs[i].getAttribute("fieldrow");
    let col = divs[i].getAttribute("fieldcol");
    
    if (!data[row]) data[row] = {};
    
    data[row][col] = divs[i];
  }
  
  return data;  
})();

map[1][2].textContent = "1-й ряд, 2-й столбик";
map[2][4].textContent = "2-й ряд, 4-й столбик";

// console.log( map );

.boardfield {
  display: flex;
}

div {
  margin: 4px;
  padding: 4px;
  border: 1px solid red;
}

<div class="boardfield">
  <div class="boardfield__field" fieldrow="1" fieldcol="1"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="2"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="3"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="4"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="5"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="6"></div>
  <div class="boardfield__field" fieldrow="1" fieldcol="6"></div>
</div>

<div class="boardfield">
  <div class="boardfield__field" fieldrow="2" fieldcol="1"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="2"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="3"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="4"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="5"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="6"></div>
  <div class="boardfield__field" fieldrow="2" fieldcol="6"></div>
</div>

БЛОГ НА HUSL

Выбрать из всех элементов тот у которого есть нужный атрибут

Ответы (2 шт):