Найти внешний элемент на странице HTML после нажатия - PullRequest
Новая
       51

Найти внешний элемент на странице HTML после нажатия

0 голосов
/ 27 февраля 2020

Я пытаюсь получить соответствующие элементы, которые содержат несколько кнопок, которые могут быть нажаты. В качестве примера я хотел бы получить строку таблицы, которая содержит кнопку, по которой была нажата кнопка.

В приведенном ниже коде нажатие вызывает соответствующий JavaScript, но «ближайший» возвращает объект, который не является одной из строк таблицы. Я также пробовал event.target вместо этого и parents вместо closest, но ни один не работал. 

$(".ok").on("click", function(event) {
  console.log("ok clicked! " + JSON.stringify(event));
  var row = $(this).closest("tr");
  console.log("event  = " + event.target.nodeName);
  console.log("outer type = " + typeof(row));
  console.log("outer id = " + row.id);
  console.log("outer  = " + JSON.stringify(row));
});
<table>
  <tr class="outer" id="id-1">
    <td>
      <button type="button" class="ok">B1</button>
    </td>
  </tr>
  <tr class="outer" id="id-2">
    <td>
      <button type="button" class="ok">B2</button>
    </td>
  </tr>
</table>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

Используя ближайший, вы получаете массив в качестве возвращаемого значения, это можно увидеть, если вы просто войдете в ближайший. Вы должны получить доступ к первому индексу, чтобы получить ближайший элемент, который вы искали. 

$(".ok").on("click", function(event) {
  console.log("ok clicked! " + JSON.stringify(event));
  var row = $(this).closest("tr")[0];
  console.log("outer id = " + row.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="outer" id="id-1">
    <td>
      <button type="button" class="ok">B1</button>
    </td>
  </tr>
  <tr class="outer" id="id-2">
    <td>
      <button type="button" class="ok">B2</button>
    </td>
  </tr>
</table>
0 голосов
/ 27 февраля 2020

Вы можете использовать parent.parent метод jquery, чтобы найти строку, т.е. tr 

$(document).ready(function(){
 $(".ok").on( "click", function( event ) {
        var row = $(this).parent().parent();
        console.log("event  = "+event.target.nodeName);
        console.log("outer type = "+typeof(row));
        console.log("outer id = "+row.attr("id"));
        console.log("outer  = "+JSON.stringify(row));
      });   
 })
<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  </head>
  <body>
    <table>
      <tr class="outer" id="id-1">
        <td>
          <button type="button" class="ok">B1</button>
        </td>
      </tr>       
      <tr class="outer" id="id-2">
        <td>
          <button type="button" class="ok">B2</button>
        </td>
      </tr>                 
    </table>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...