DavidDunham DavidDunham - 3 months ago 15
Javascript Question

Jquery each through <a> gives me href only

I have a simple menu

<div class="nav-container desktop">
<a href="_index.php?page=_sub_papa&main=klassen">One</a>
<a href="_index.php?page=_sub_papa&main=tw">Twp</a>
</div>


I am looping through this with jQuery each and then creating
<li>
tags with the complete
<a.../a>
.

$.each( $('.nav-container>a'), function(i, item){
var menupunkt = '<li>' + item + '</li>'
console.log(i, menupunkt);
});


Examples: http://codepen.io/anon/pen/bwbgap, https://jsfiddle.net/86g44ssp/

In my console I see only the following

<li>http://xyz.ccom/_index.php?page=_sub_papa&main=tw</li>"


enter image description here

Why don't I get the whole a? Because when I just print "item" I get the whole
<a.../a>

Answer

I have updated your fiddle, you just need to change

 var menupunkt = '<li>' + item + '</li>'

to

 var menupunkt = '<li>' + item.outerHTML + '</li>'

And there is no need to add extra wrapping or stuff, just get the HTML from outerHTML and you're done !