Controlling wrap and unwrap methods in jQuery

Question

I am working on the demo code below. How can I use jQuery in these ways?:

1- Wrap the p only if it has not already wrapped with .check-wrap-sapn

and

2- Unwrap only .check-wrap-sapn and not any other parent?

What is happening now jQuery wraps the p element with .check-wrap-sapn as long as users clicks on #wrap and removes all parents of p even if there is not any wrapper called .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>

score 5 · Accepted Answer · answered Sep 25 '15 at 07:09

5

Get it's parent using parent() and check it's .check-wrap-sapn or not using 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>

answered Sep 25 '15 at 07:09

Pranav C Balan

113,687
23
165
188

Thanks Pranav C Balan but why you are not using `{ }` after the if statement? – Suffii Sep 25 '15 at 07:15
@Suffii : there is only one line of code to execute... so it's optional.... http://stackoverflow.com/questions/4797286/are-curly-braces-necessary-in-one-line-statements-in-javascript – Pranav C Balan Sep 25 '15 at 07:16
@Suffii : glad to help :) – Pranav C Balan Sep 25 '15 at 07:17

Controlling wrap and unwrap methods in jQuery

1 Answers1