Bug Tracker

#3171 closed bug (invalid)

Opened July 19, 2008 10:22AM UTC

Closed January 18, 2009 02:37AM UTC

Last modified January 18, 2009 11:44AM UTC

wrap() only adds sibling in some instances

Reported by: logicmason Owned by:
Priority: major Milestone: 1.3
Component: core Version: 1.2.6
Keywords: wrap() adds sibling Cc: logicmason, flesler, Julian-Birch
Blocked by: Blocking:
Description

I have found that wrap() is not working properly when trying to wrap with elements containing text. For example, taking this HTML:

...
    <ul>
        <li><a target="..." href="...">Text1</a></li>
        <li><a target="..." href="...">Text2</a></li>
    </ul>
...

If I attempt to wrap the <a> element around the <li> element using:

(NOTE: $(this) in all the examples shown on this page relate to the <li> elements)

var linkElem = $(this).find( "a:first" );
		
$(this).wrap( linkElem );
$(this).remove( "a" );

The result (seen using firebug) is that the inner <a> element is added as a sibling to the wrap() caller element:

...
    <ul>
        <a target="..." href="...">Text1</a>
        <li><a target="..." href="...">Text1</a></li>
        <li><a target="..." href="...">Text2</a></li>
    </ul>
...

I note as well the call to remove() did not remove the inner element. To workaround this, it seems you actually have to remove the wrapping element's text, then wrap it around the inner element, then re-apply the text to the inner element:

var linkElem = $(this).find( "a:first" );
var linkText = $(linkElem).text();
		
$(linkElem).empty();
$(this).wrap( linkElem );
$(this).empty();
$(this).text( linkText );

created:

...
    <ul>
        <a target="..." href="..."><li>Text1</li></a>
        <a target="..." href="..."><li>Text2</li></a>
    </ul>
...

Have only tried this in FF3.

Attachments (0)
Change History (5)

Changed July 22, 2008 02:23AM UTC by flesler comment:1

need: Review → Test Case

Can you make a small test case out of this ?

An html file with the js needed for this error to come up.

Changed October 31, 2008 11:55AM UTC by Julian-Birch comment:2

This looks like the same bug I'm experiencing. The following demonstrates it pretty nicely. Happens (amazingly) portably on a wide range of browsers.

Makes certain things pretty impossible...

Julian.

<html>

<head> <script type="text/javascript" src="/jquery-1.2.6.js"></script> <script type="text/javascript">

$(document).ready(function() {

elements = $("div > *"); elements.wrap("span");

}); </script> </head> <body>

<form><div class='Box'>

<label for='repeat'>Repeat</label> <span>

<input id='repeat' type='text' value='Box1' />

</span>

</div> </form>

</body> </html>

Changed October 31, 2008 03:27PM UTC by flesler comment:3

cc: → logicmason, flesler, Julian-Birch
need: Test Case → Review

Ok, will check the test case asap (not today).

Changed January 18, 2009 02:37AM UTC by dmethvin comment:4

resolution: → invalid
status: new → closed

The Julian-Birch test case isn't valid:

elements.wrap("span");

works fine with this:

elements.wrap("<span></span>");

On the OP's example, wrap is not intended to deal with cases where there are already sibling elements inside the wrapping element, which is the case with <a href="">text</a>. The text is a child of the <a>; using it as the wrapping element does not cause the <li> to adopt the text.

Note that <a> is an inline element and <li> is a block element, so the HTML created is invalid. However, your final approach would be the right one to use to get the HTML you wanted.

Changed January 18, 2009 11:44AM UTC by Julian-Birch comment:5

Agreed. Sorry, I managed to find the problem with the test case, but couldn't track down the ticket earlier. Everything works as per spec.