JQuery e controllo Wrap e Separa metodi

Question

Potete per favore dare un'occhiata a questa demo e fammi sapere come posso usare jQuery in modo

1- avvolgere il p solo se non è già avvolto con .check-wrap-sapn

e

2- Separa SOLO.check-wrap-sapn e non qualsiasi altro genitore?

ciò che sta accadendo ora jquery avvolge l'elemento p con .check-wrap-sapn finché clic degli utenti su #wrap e rimuove tutti i genitori di p anche se non v'è alcun involucro chiamato .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

Prendi il genitore usando parent() e verifica che sia .check-wrap-sapn o non utilizzi 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>