单击后在 HTML 页面中查找外部元素

Question

我正在尝试获取包含多个可以单击的按钮的相应元素。例如，我想获取包含已单击按钮的 table 行。

在下面的代码中，单击会调用相应的 JavaScript，但 "closest" returns 对象不是 table 行之一。我也试过 event.target 而不是这个， parents 而不是 closest 但 none 确实有效。

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

Answer 1

您可以使用 jquery 的 parent.parent 方法来查找行，即 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>

Answer 2

通过使用 closest ，您会收到一个数组作为返回值，如果您只记录 closest 就可以看到这一点。您必须访问第一个索引才能获得您正在寻找的最接近的元素。

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

单击后在 HTML 页面中查找外部元素

Find outer element in HTML page after click

javascript

jquery

click

closest