Question

I have a problem which seems to be simple but some how I cannot figure the best way to do it.

Below is my html Structure:

  <div id="PasswordStrengthBorder" style="position: absolute; display: inline;
  height:3px; top: 379px; left: 556px; border-style: solid; border-width: 1px; 
  padding: 2px; width: 200px;"> </div>

  <div class="BarIndicator" id="PasswordStrengthBar" style="position: absolute;
  display: inline; height: 5px; top: 381px; left: 559px; width: 100px; 
  background-color: blue;">
  </div>

  <span style="position: absolute; top: 389px; left: 556px; font-size: 75%; 
  display: inline-block; width: 200px;">3 more characters, At least 1 more symbol,
  1 Upper case characters, 1 lower case character</span>

All this is dynamic html and is added to the html page by a plugin. I need to wrap all these three elements in a single div. What is the correct way of doing it?

Answer 1

You can use this code:

$('.yourClass').wrapAll('<div id="wrapper">');

http://api.jquery.com/wrapAll/