JQuery shell syntax

Question

This is the end of the day. I hope that I just run out of logic.

I can't get this to work:

var $divA= $("<div></div>").addClass('classA'); var $divB= $("<div></div>").addClass('classB'); $myDiv.after($divA.wrap($divB)); 

The above should look like this:

 <div id="myDiv"></div> 

In it:

 <div id="myDiv"></div> <div class="classB"> <div class="classA"></div> </div> 

But it does not seem to work with this "wrap". I am not getting any errors, it just does not end divA with divB and just inserts divA on its own.

Am I really wrong?

UPDATE:

The simplest example that does not work:

 $myBox.after($("<p></p>").wrap("<div></div>")); 

This will add only the DIV after myBox.

JQuery doesn't seem to like adding after adding.

Answer 1

You tried

 $myDiv.after($divA.wrap('<div class="divB"></div>')); 

just for testing purposes?

As far as I understand, you should not pass the jQuery object to the wrap function:

The .wrap () function can accept any string or object that can be passed to the $ () factory function before specifying the DOM structure . This structure can be nested several levels deep, but should contain only one very closed element. the structure will be wrapped around each element in the set of matched elements.

If the example above works, then this is the reason; -)

Answer 2

Just stumbled upon this topic with the same problem: jQuery.wrap () doesn't work

I think if you change your code with

$myDiv.after($divA.wrap($divB)) to $myDiv.after($divA.wrap($divB).parent())

you will get your wrapper.

Answer 3

You may not be lucky that .wrap() returns an internal element, not a parent element.

So you should use the parent wrapped like this:

 var $divA= $("<div/>").addClass('classA'), $divB= $("<div/>").addClass('classB'); $myDiv.after($divA.wrap($divB).parent()); 

( $divA.parent() after wrapping $divB )

So the key part is that $divA.wrap($divB) returns $divA , NOT $divB

see link:

This method returns the original set of items for the goal chain.

http://api.jquery.com/wrap/

Answer 4

I got this to work:

 $('div#myDiv').after("<div class='classA'></div>").end().find('.classA').wrap("<div class='classB'></div>"); 

with your html to solve your initial question. Here is the source for the jQuery end function. This code will go so that the chain goes up one level (to the myDiv level) and then wraps around based on find ('. ClassA') at that level. After that you add your div and add it to the div with the class.

Edit: Well, I think this will work for you the way you want:

 var divA= $("<div></div>").addClass('classA'); $('div#myDiv').after($(divA).wrap('<div class="divB" />')); 

I think the problem was that when wrap was called on divA, it should be correct for the jQuery object. So really all you were missing was wrapping divA in ().

Answer 5

You are not looking for a wrapper. Do you want to:

 divB.append(divA).insertAfter('#myDiv'); 

Answer 6

I may be reading this incorrectly, but if you are using jQuery, is this not a reserved $ character? did you try to just set the variable names so they don't use it?

If yes:

 var divA = $("<div></div>").addClass('classA'); divA.wrap("<div class=\"classB\"></div>"); divA.insertAfter($("#myDiv")); 

or

 divA.after($("#myDiv")); 

Here's jQuery docs on this.