Как выбрать правильную кнопку в списке с помощью jQuery?

Question

У меня есть список разных серверов. Поэтому, нажимая на кнопку «подключиться», я хочу подключиться к этому конкретному серверу. Как выбрать правильную кнопку с помощью jQuery? Заранее спасибо!

{% for  server in servers%}
  {% if server.credential.user == user %}
    {% if server.credential.protocol == 'vnc' %}
      <a>
        <div class="p-l-20" id="server_details">
          <h4>{{server.name}}</h4>
          <h6>Hostname: {{server.hostname}}</h6>
          <h6>IP Address: {{server.ip}}</h6>
          <h6>Protocol: {{server.credential.protocol|upper}}</h6>
          <h6>User: {{server.credential.user}}</h6>
          <button type="button" >Connect</button>
        </div>
      </a>
    {% endif %}
  {% endif %}
{% endfor %}

Answer 1

Во-первых, удалите родительский элемент <a>, поскольку у вас не может быть вложенных интерактивных элементов.Во-вторых, вы создаете множество элементов с одинаковым id, который недопустим, поскольку они должны быть уникальными в DOM.Вместо этого измените server_details на класс.

Чтобы добиться того, что вам требуется, добавьте обработчик событий к элементам button.Оттуда вы можете пройти через DOM, чтобы найти необходимую информацию о сервере.В приведенном ниже примере я добавил span вокруг IP-адреса с классом, который вы можете выбрать для чтения его text(), но шаблон такой же, как и для любых других деталей, которые вы хотите прочитать:

$('button').on('click', function() {
  var ip = $(this).closest('.server_details').find('.ip').text();
  console.log(ip);
});

.server_details {
  margin-bottom: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-l-20 server_details">
  <h4>{{server.name1}}</h4>
  <h6>Hostname: {{server.hostname1}}</h6>
  <h6>IP Address: <span class="ip">{{server.ip1}}</span></h6>
  <h6>Protocol: {{server.credential.protocol1|upper}}</h6>
  <h6>User: {{server.credential.user1}}</h6>
  <button type="button">Connect</button>
</div>
<div class="p-l-20 server_details">
  <h4>{{server.name2}}</h4>
  <h6>Hostname: {{server.hostname2}}</h6>
  <h6>IP Address: <span class="ip">{{server.ip2}}</span></h6>
  <h6>Protocol: {{server.credential.protocol2|upper}}</h6>
  <h6>User: {{server.credential.user2}}</h6>
  <button type="button">Connect</button>
</div>