Bug Tracker

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#14131 closed bug (notabug)

JQuery warp function is not working properly

Reported by: dgofman@… Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

Please review my code I create two scripts: native JavaScript and using JQuery wrap function. I would like to report the wrap function is not working properly at least before and after API are not working:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="native" style="background-color:green"></div>
	<br/><br/>
	<div id="jquery" style="background-color:red"></div>
</body>
<script>

var container1 = document.getElementById("native");

//create element
var div = document.createElement("div");
div.innerHTML = "HELLO WORLD";
container1.appendChild(div);

//append
var p = document.createElement("p");
p.innerHTML = "LAST";
container1.appendChild(p);

//wrap
var span = document.createElement("span");
span.style.color = "blue";
div.parentNode.insertBefore(span, div);
span.appendChild(div);

//before
var p = document.createElement("p");
p.innerHTML = "BEFORE";
span.parentNode.insertBefore(p, span);

//after
var p = document.createElement("p");
p.innerHTML = "AFTER";
span.parentNode.insertBefore(p, span.nextSibling);

</script>

<script>

var container2 = $("#jquery");

//create element
var div = $("<div></div>");
div.html("HELLO WORLD");
container2.append(div);

//append
var p = $("<p></p>");
p.html("LAST");
container2.append(p);

//wrap
var span = $("<span></span>");
span.css("color",  "blue");
div.wrap(span);

//span = div;

//before
var p = $("<p></p>");
p.html("BEFORE");
span.before(p);

//after
var p = $("<p></p>");
p.html("AFTER");
span.after(p);

</script>

</html>

Change History (4)

comment:2 Changed 6 years ago by timmywil

Resolution: notabug
Status: newclosed

We have to clone the element with which the collection is wrapped, which means a new element will be created based on the element passed to wrap. This is to provide a mechanism to conveniently wrap more than one element at a time with the same html. It also avoids unexpected behavior when wrapping with existing elements. Below is one way to get the new span element:

http://jsfiddle.net/timmywil/pDreG/2/

comment:3 Changed 6 years ago by anonymous

HI timmywil, Thanks for your time, but for me your workaround looks very strange

I have a div component (input/select etc)

var div = $("<div></div>");

now I am creating a spam wrapper and apply for the div: <span><div></div></span>

var span = $("<span></span>"); div.wrap(span);

Why should I ask div where is my span if I already have a span variable????

FIX Get the correct span span = div.parent();

before var p = $("<p></p>"); p.html("BEFORE"); span.before(p);

comment:4 Changed 6 years ago by dmethvin

This isn't a bug report, it's a request for jQuery programming help. Wrapping a block element in an inline element doesn't make much sense anyway. Ask for help on a forum.

Note: See TracTickets for help on using tickets.