我正在编写下面的演示代码。我如何以这些方式使用 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>
最佳答案
使用 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>
关于javascript - 在 jQuery 中控制 wrap 和 unwrap 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32776634/