2

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

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

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

         
    $.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>

2 ответа 2

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

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

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>

4
  • При поиске он все ровно через цикл да работает? каждый раз идет и через цикл находит нужный? вот вариант Игора,вроде то что нужно Commented 4 янв. 2021 в 16:18
  • @ՆորայրԵղիազարյան Нет, один раз циклом проходит сохраняет ссылки на div-ы в объекте. А дальше при обращении сразу достает элемент под соответствующим индексом. Вариант Игоря - не знаю как работает внутри и сколько там циклов) Если речь не идет про миллионы обращений в секунду, можно и не париться — лишь бы было удобно писать это в коде. Commented 4 янв. 2021 в 16:26
  • Спасибо Вам огромное Commented 4 янв. 2021 в 16:28
  • @ՆորայրԵղիազարյան В идеале - сделать функцию function getField(row, col) { return $(`.boardfield__field[fieldrow=${ row }][fieldcol=${ col }]`); } и можно вызывать getField(2, 4) — тогда при необходимости изменить метод поиска, надо будет только поменять реализацию функции, а не переписывать всё в коде. Commented 4 янв. 2021 в 16:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.