使用 .closest() 比较最近的 id答案

【问题标题】：Compare the closest id using .closest()使用 .closest() 比较最近的 id
【发布时间】：2020-12-31 07:24:33
【问题描述】：

我正在检查最接近 selected 类的 id 是否是 toshow。从代码中可以看出，条件应该为真，但在控制台显示为假。

为什么显示为假？
如何在控制台中显示它的真实性？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]") == "toshow");
</script>
</html>

【问题讨论】：

标签： javascript jquery console operators jquery-events

【解决方案1】：

closest 是一个 DOM 选择器函数。结果是对元素的引用。您想检查返回元素的id：

  console.log($(".selected").closest("[id]").attr('id') == "toshow");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]").attr('id') == "toshow");
</script>
</html>

【讨论】：

看起来不错的代码。为什么不让它成为一个可运行的 sn-p？
已经是了。这只是@nikhil_2001 在原始问题中发布的 sn-p 的副本，因此它可以表明它在更改后记录为 true。

【解决方案2】：

你应该比较 attr，它的返回元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]").attr("id") == "toshow");
</script>
</html>

【讨论】：