How to get the wrapper element created with "wrapAll()"?

Question

Consider the following code: (live example here)

$(function() {
  var wrapper = $("<div class='wrapper'></div>");
  $(".a").wrapAll(wrapper);
  wrapper.css("border", "5px solid black"); // Doesn't work
});

.wrapper {
  background-color: #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>

What would be the right way to get the created wrapper and change its attributes ?

Note: There are other .wrapper elements in the DOM, so this won't work:

$(".wrapper").css("border", "5px solid black");

I don't want to give a unique id to the created wrapper either.

Frédéric Hamidi · Accepted Answer · 2011-08-07T12:47:25.970

34

Since you just wrapped the elements, you can use parent() to obtain the newly inserted wrappers:

$(".a").wrapAll("<div class='wrapper'></div>")
       .parent().css("border", "5px solid black");

edited Aug 07 '11 at 12:47

answered Aug 07 '11 at 12:36

Frédéric Hamidi

258,201
41
486
479

@Matthew, `wrapAll()` returns the wrapped element. See [this fiddle](http://jsfiddle.net/2e2WL/), it will say `DIV` and not `P`. – Frédéric Hamidi Aug 07 '11 at 12:39
1

It would be nice to have a way to more robustly capture the resulting wrapper...using parent only goes one level up, but if someone came in and added a nested div as a wrapper (e.g. `
`), then parent will not get the outermost wrapper, as is most likely expected. – jbyrd Nov 19 '18 at 18:46

score 6 · Answer 2 · answered Aug 07 '11 at 12:44

6

The jQuery object stored in wrapper gets cloned when wrapAll gets called, so you cannot affect the .wrappers which have been inserted into the DOM by manipulating wrapper, you need to select them from the document.

answered Aug 07 '11 at 12:44

karim79

339,989
67
413
406

+1 for explaining how `wrapAll()` works, though it doesn't answer my question. – Misha Moroshko Aug 07 '11 at 12:48
@Misha - I thought Frederic had already done that, just wanted to add a point. – karim79 Aug 07 '11 at 12:50
@karim79 probably better to do that as a comment to the original answer – andyface Apr 16 '14 at 15:16

score -2 · Answer 3 · answered Aug 07 '11 at 12:38

-2

$(function() {
    var wrapper = $("<div class='wrapper'></div>");
    var wrapped = $(".a").wrapAll(wrapper);
    wrapped.css("border", "5px solid black");
});

answered Aug 07 '11 at 12:38

Billy Moon

57,113
24
136
237

How to get the wrapper element created with "wrapAll()"?

3 Answers3