javascript - 在 jQuery 中控制 wrap 和 unwrap 方法

Question

我正在编写下面的演示代码。我如何以这些方式使用 jQuery？:

1- 包装 p只有当它还没有用 .check-wrap-sapn 包裹时

和

2- 仅展开 .check-wrap-sapn而不是任何其他 parent ？

现在发生了什么，jQuery 包装了 p带有 .check-wrap-sapn 的元素只要用户点击#wrap并删除 p 的所有父级即使没有任何名为 .check-wrap-sapn 的包装器

$("#wrap").on("click", function() {
  $("p").wrap("<div class='check-wrap-sapn'></div>");
});

$("#unwrap").on("click", function() {
  $("p").unwrap("<div class='check-wrap-sapn'></div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div class="well">
    <p>This is for Wrapping</p>
  </div>
</div>

<button class="btn btn-default" id="wrap">Wrap</button>
<button class="btn btn-default" id="unwrap">Un Wrap</button>

Answer 1

使用 parent() 获取它的父级 并检查它是 .check-wrap-sapn 还是不使用 is()

var $p = $("p");

$("#wrap").on("click", function() {
  if ($p.parent().is(':not(.check-wrap-sapn)'))
    $p.wrap("<div class='check-wrap-sapn'></div>");
});

$("#unwrap").on("click", function() {
  if ($p.parent().is('.check-wrap-sapn'))
    $p.unwrap("<div class='check-wrap-sapn'></div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div class="well">
    <p>This is for Wrapping</p>
  </div>
</div>

<button class="btn btn-default" id="wrap">Wrap</button>
<button class="btn btn-default" id="unwrap">Un Wrap</button>