logo标签列表

jQuery parent() 函数返回空值

javascriptjqueryhtmlparent
4

我有以下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 循环的每个迭代中，我将新元素 elem（即上一个元素的父元素）记录到控制台上。以下是我得到的结果：

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

当表格被访问时，它显然没有父级，尽管它实际上有一个父级，即 div。为了进一步测试这个问题，我使用控制台执行了以下操作：

$("table").parent();

它返回了一个空数组

[]

为什么jQuery说表格没有父元素，因为除了<html>以外的所有元素都有父元素呢？
1
在 break; 之前尝试添加 console.log。 - Fr0z3n7
@FelixKing - 但问题是，循环永远不会终止，它会一直进行下去，页面会崩溃。所以现在我只需要循环找到元素，然后在中断之前可以存储该元素。 - vcapra1
@wZVanG - 我尝试使用 $(elem).parents()，但是数组的最后一个元素是表格，并且使用选择器时，它是一个空数组。 - vcapra1
div内的代码是在页面加载时生成的，div是空白的。这会导致问题吗？ - vcapra1
这是一个记录 div 的 jsfiddle。https://jsfiddle.net/rts3b3ad/ - Nema
显示剩余10条评论
2个回答
2
我稍微修改了你的代码，现在它可以正常工作了。我不再使用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控制台并查看其日志记录。

2
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>

好的，我真的不明白为什么这对我不起作用。你的代码看起来应该可以工作，但出于某种原因它没有工作。在 div.findme 中有许多其他元素，所有这些元素都按预期工作，输出为 'found it'，但是图像是唯一一个不起作用的元素。而且它是与那些正在工作的元素同级的！ - vcapra1
我弄清楚了：图像还有另一个click()方法，是由jQuery定义的，我忘记了，所以它调用了那个方法。所以这个方法确实有效。谢谢！ - vcapra1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接