使用wrapAll在div和他的孩子周围创建边框

Question

My code not workin well. I want to create border around div id="wrap_all" and his children using warpAll(). Did Is it possible to use with $("#wrap_all").wrapAll("<div></div>"); If yes I don't know how to that. I am allso don't know how to include id="xxx" inside ("<div id="xxx"></div>") order for manipulate the new div with id xxx to make

$(#'xxx')..css("border", "3px double red");

link for examle: http://jsfiddle.net/centerwow/9TPtn/27/ Thanks.

code html:

<div  class="foo">a</div>
<div class="foo">b</div>
<div class="foo">c</div>
<div id="foo" class="foo">d</div>
 <div id ="wrap_all">
  <div class="foo">r</div>
  <div class="foo">f</div>
  <div class="foo">g</div>
 </div>
<div class="foo">h</div>
<span></span>​

link for examle.

jquery code:

var modWidth = 50;
$('#wrap_all').hover(function() {
    $(this).warpAll()
    $(this).css("background", "green");
    $(this).css("border", "3px double red");
    $(this).width(modWidth);


}, function() {
        $(this).css("background", "#cac");
         $(this).width(40);
    });

Answer 1

Not sure if this is the problem, but the code you posted says

$(this).warpAll()

Instead of

$(this).wrapAll();

(Notice the corrected spelling of "wrap" and the added semicolon).