jQuery parent()函数返回空

jQuery parent() function returns empty

本文关键字：返回 函数 parent jQuery      更新时间：2023-09-26

我有以下html(简化为基本设置):

<div class="findme">
  <table>
    <tr>
      <td>
        <img id="image" src="image.png" onclick="findTheDiv(event)" />
      </td>
    </tr>
  </table>
</div>

当我点击图像时，findTheDiv(event)函数运行，看起来像这样:

function findTheDiv(event) {
  var elem = $(event.toElement);
  var found = false;
  // stop the loop if the top-level element is reached (html)
  while (!$(elem).is("html")) {
    if ($(elem).is("div.findme")) {
      found = true;
      break;
    }
    elem = $(elem).parent();
    console.log(elem);
  }
}

运行，并且对于while循环的每次迭代，我将新元素(即前一个元素的父元素)记录到控制台。这是我得到的结果:

[<img id="image" src="image.png" onclick="findTheDiv(event)">]
[<td>]
[<tr>]
[<table>]
[]

当到达表时，它显然没有父表，尽管它显然有父表，即div。为了进一步测试，我使用控制台执行以下命令:

$("table").parent();

返回一个空白数组

[]

为什么jQuery说表没有父，因为除了<html>的所有元素都有父?

jQuery closest函数已经提供了您正在寻找的功能，无需重新发明轮子:

function findTheDiv(e) {
  var res = $(elem).closest('div.findme')
  if (res. length) {
    console.log('found it', res)
    return true
  }
  console.log('the image is not inside a `div.findme`')
  return false
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="findme">
  <table>
    <tr>
      <td>
        <img id="image" src="image.png" onclick="findTheDiv(this)" />
      </td>
    </tr>
  </table>
</div>

我改变了你的代码一点，它工作得很好。而不是使用event对象作为参数，我只是传递this来引用直接触发事件的对象。

function findTheDiv(elem) {
  //var elem = $(event.toElement);
  var found = false;
  // stop the loop if the top-level element is reached (html)
  while (!$(elem).is("html")) {
    if ($(elem).is("div.findme")) {
      found = true;
      break;
    }
    elem = $(elem).parent();
    console.log(elem);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="findme">
  <table>
    <tr>
      <td>
        <img id="image" src="image.png" onclick="findTheDiv(this)" />
      </td>
    </tr>
  </table>
</div>

运行代码片段，打开JavaScript控制台，查看它记录的内容。

相关文章：