jQueryとの制御ラップやアンラップ方法

Question

あなたはこのデモを見て、私は道

1- jqueryのを使用する方法を教えてくださいすることができ、それはすでに.check-wrap-sapn

に包まれていない場合にのみ、 pラップ

と

2 - アンラップONLY.check-wrap-sapnはなく、他の親？

今何が起こっているjQueryの#wrap上のユーザーのクリック限り.check-wrap-sapnでp要素をラップし、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>