Question

我有这个HTML：

<div id="content">
    <div id="main">
      <a href=""><div class="subdiv"></div></a>
    </div>
</div>

我想为.subdiv展开主div。我是这样做的：

$('#content').find('.subdiv').unwrap();

现在，我遇到了某个问题，有时.subdiv div位于链接内部。

如何检查.subdiv是否在链接内，并将unwrap切换到链接？

我这样尝试过，但是失败了：

if( $('#content').find('.subdiv a').length>0)
{
    $('#content').find('.subdiv a').unwrap();
}
else
{
    $('#content').find('.subdiv').unwrap();
}

Answer 1

如何检查.subdiv是否在链接内，并将unwrap切换到链接？

使用closest，它找到与选择器匹配的最接近的祖先元素（从元素本身开始，一直朝文档元素移动）：

var el = $("#content").find(".subdiv");
var a = el.closest("a");
if (a.length) {
    el = a;
}
el.unwrap();

实时示例：

console.log("Note that 'sub' is red and bold");
setTimeout(function() {
    var el = $("#content").find(".subdiv");
    var a = el.closest("a");
    if (a.length) {
        el = a;
    }
    el.unwrap();
    console.log("Unwrapped, it's no longer red and bold");
}, 800);

#main a {
  color: red;
  font-weight: bold;
}

<div id="content">
    <div id="main">
      <a href=""><div class="subdiv">sub</div></a>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

unwrap()仅适用于父元素。由于HTML结构可能会因您的情况而改变，因此最好直接选择.subdiv元素，然后将其附加到所需的位置，如下所示：

$('#content .subdiv').appendTo('#content');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  #content
  <div id="main">
    #main
    <a href="#">
      Link
      <div class="subdiv">#subdiv</div>
    </a>
  </div>
</div>

如何检查查找结果是否在链接内

2 个答案: