unwrap problem

[Walle]

I have problem with unwrap function. I wrap selected link and want remove it when click on other links in nav1.

I tested all kinds of stuff but nothing seems work. Any suggestion?

 $('#nav1 a').click(function(){

   $("#nav1 span").unwrap()
    $("#nav1 div").unwrap()

 $(this).wrap('<div class="block3"><span></span><div class="block4"</div</div>');

});

[johanafm]

I've never used wrap, but I find it implausible that your code would work, even if it didn't contain invalid HTML code.
Here

<div class="block4"</div>

You have garbage html code. Fixing that is step one.

While I've never used jQuery, I'm guessing that the $() function lets you selects elements using CSS selector style, so that #id selects an element with a matching id, i.e. similar to document.getElementById('id'). And while CSS does let you construct selectors like '#id el', since an id attribute value has to be unique across the entire document, using the same id in several places and then trying to select those different elements with a combintion of id and element may or may not work. First off it would depend on what the browser does with multiple ids with the same value. Do they allow them, let the first encountered element keep its id attribute and strip it from the others, or strip it from all offending elements?
But, assuming the browser lets one or all elements retain these invalid id attributes, and moreover also returns an element when you try to retrieve an element by id, how does jquery try to lookup these elements? If they try by document.getElementById('id') first and then checks for matching element type, it might get the first element and when it checks if that element is also of a certain type, it may very well be of another type.

But the reason I doubt this would work even if you fixed these two problem is that you have two sibling elements: span and div. Which one should be wrapped around $(this)? Once again, since I don't know jQuery, it might be that $(this) will be cloned and inserted in each of the siblings, but since functions are supposed to do what the function name implies and the function isn't called cloneWrap(), I doubt this would happen.

[Walle]

It seems that I forgot one > tag. Didn’t see it before and can’t remember that, removed some style before I posted and maybe did something than. Anyhow it was for some reason resolved with adding

$('a').unwrap('block3');
$('a').unwrap('block5');  block5 added for span

and for block4 I needed to add $('a').detach('block4');

For some reason it left behind block4 (maybe because > ), i don’t know but it removed everything before first end tag, in that case </span>. After it was wrapped I had like this "<a></a><div class="block4"</div>"

New code and structure below anyway, it work and don’t need any detach(); now but 3 X times unwrap? Is there some better way to do this instead of 3 X unwrap?

	$('#nav3 a').click(function(){
	$('a').unwrap('div1');
	$('a').unwrap('div1a');
	$('a').unwrap('div1b'); 

$(this).wrap('<div class="div1"><div class="div1a"><div class="div1b"></div></div></div>');
});

[johanafm]

Perhaps, but it's in reality impossible to say what code would be equivalent without knowing what the DOM tree rooted at #div1 looks like.

For example, with

<div id="div1">
	<div id="div1a">
		<div id="div1b">
			<a id="nav2" href="javascript:void(0);">1</a>
		</div>
	</div>
</div>
<a id="nav3" href="javascript:void(1);">2</a>

this would do the same as yours

$('#nav3').click(function()
	{
		$('#div1 a').replaceAll('#div1');
		$(this).wrap('<div class="div1"><div class="div1a"><div class="div1b"></div></div></div>');
	}
);

But if there's anything but anchors in #div1b, my code would not do the same as yours. You can check against

<div id="div1">
	<div id="div1a">
		<div id="div1b">
			<span>text</span>
			<a id="nav2" href="javascript:void(0);">1</a>
		</div>
	</div>
</div>
<a id="nav3" href="javascript:void(1);">2</a>