Динамически увеличивать ID идентификатора с помощью JQuery

Question

Как дать динамические значения идентификатора в последовательном порядке для td id="Selected_Device" в коде ниже, используя jQuery?

Мне нужно добавить статус каждого устройства в сети или в автономном режиме. Я получаю разные значения статуса для каждого td, но он переопределяется, потому что он имеет тот же идентификатор. Я включил свой вызов ajax. Он займет длину mac, проверит, подключен ли mac или нет, и добавляет результат в соответствующий столбец. Текущий код переопределяет только последний статус в каждой ячейке td. Потому что идентификатор тд одинаков для всех устройств.

    <td class="Selected_Device" id="Selected_Device">

HTML

<tbody class="parameter_table">
  <% @my_devices.all.each do |parameter| %>
  <tr id="tr_device_<%=parameter.id %>">
    <td >
      <input  type="checkbox" class="checkBox" name="checkBox_m[]" >
    </td>
    <td class="macaddres" style="word-break:break-all;">
      <%= parameter.mac_address%> 
    </td>
    <td class="Selected_Device" id="Selected_Device">
    </td>
  </tr>
  <% end %>
</tbody>   

Файл JS

function getDeviceType() {

   var selected_Device_Mac ;

 var selected_device_id = '';

         if ($('#PA').is(":visible")) {
         console.log("before")
         selected_Device_Mac = document.querySelectorAll(".macAddr");
         var k=selected_Device_Mac.length;
          selected_device_id = document.querySelectorAll(".Selected_Device");

  for (var i=0;i<k;i++){
 $.ajax({

         method: "GET",
         dataType: "text",
         url: "getDeviceStatus",
         data: {
             mac : selected_Device_Mac[i].innerText,
         },

         success: function(result) {
             if(result!==""){

                 if(result.includes("On-line")){
                    //$(selected_device_id).html("");
                    $(selected_device_id).append(result+"&nbsp;&nbsp;&#9989;");

                 }else if(result.includes("Off-line")){
                    // $(selected_device_id).html("");
                     $(selected_device_id).append(result+"&nbsp;&nbsp;&#10071;");


                 }


             }
        }

     }

 );

}

Answer 1

Я бы полностью переписал ваш код js следующим образом:

function getDeviceType() {

  if (!$('#PA').is(":visible")) {
    return;
  }

  $(".macAddr").each(function(index, macAddrEl) {
        $.ajax({

          method: "GET",
          dataType: "text",
          url: "getDeviceStatus",
          data: {
            mac: $(macAddrEl).text().trim(),
          },

          success: function(result) {
            if (result !== "") {
              var nextColumnCell = $(macAddrEl).parent("tr").find(".Selected_Device")

              if (result.includes("On-line")) {
                nextColumnCell.append(result + "  ✅")
              } else if (result.includes("Off-line")) {
                nextColumnCell.append(result + "  ❗");
              }
            }
          }
        })

Он получает список элементов с классом macAddr (кстати, в шаблоне у вас есть macaddres класс), и для каждого элемента он получает свое содержимое $(macAddrEl).text().trim(), а затем ищет элемент с классом Selected_Device, который имеет тот же родительский элемент tr, что и текущий элемент mac $(macAddrEl).parent("tr").find(".Selected_Device")

Вы можете увидеть рабочую демонстрацию (пропущена часть ajax, она просто читает содержимое ячеек с классом macaddres и заполняет ячейки с классом Selected_Device с индексом)

PS. Поскольку идентификатор должен быть уникальным, вам нужно сделать

<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

или (если вы не используете его) вы можете удалить идентификатор.

Answer 2

Я бы сделал что-то вроде этого:

#in your view 
<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

#in your js.erb
selected_device_id = document.getElementById("#Selected_Device_<%= parameter.id %>");