jQuery parent() 函数 returns 空

Question

我有以下 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>]
[]

当到达 table 时，它显然没有父级，尽管它显然有，即 div。为了进一步测试这一点，我使用控制台执行了这个：

$("table").parent();

它返回了一个空白数组

[]

为什么 jQuery 说 table 没有父元素，因为除了 <html> 之外的所有元素都有父元素？

Answer 1

我稍微修改了你的代码，它工作正常。我没有使用 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 控制台并查看它记录的内容。

Answer 2

jQueryclosest函数已经提供了您要找的功能，无需重新发明轮子：

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>

jQuery parent() 函数 returns 空

jQuery parent() function returns empty

html

javascript

jquery

parent