Jquery each through gives me href only

Question

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>"

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

The console.log receives only the `href` since that's the return value of `HTMLElement#toString` on an anchor element — Cam, Aug 30 '16 at 14:10

score 1 · Accepted Answer · answered Aug 30 '16 at 14:13

item or this represent a DOM element. You're casting it to string when you treat it as as string. You can use item.outerHTML - the string you're looking for - in place of item.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

NOTE

Not sure if there's an advantage to it but I would prefer:

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

Gregoire · Answer 2 · 2016-08-30T14:23:04.617

1

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 !

edited Aug 30 '16 at 14:23

answered Aug 30 '16 at 14:14

Gregoire

749
6
15

score 0 · Answer 3 · answered Aug 30 '16 at 14:07

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

score 0 · Answer 4 · edited May 23 '17 at 10:33

0

I believe you want to access the outerHTML. I've included code from another SO answer:

jQuery, get html of a whole element

https://jsfiddle.net/86g44ssp/1/

The change I've made is here:

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};


... other code here ...

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

edited May 23 '17 at 10:33

Community

1
1

answered Aug 30 '16 at 14:08

N.J.Dawson

1,220
10
28

Beneris · Answer 5 · 2016-08-30T14:22:55.827

0

$( ".nav-container a" ).wrap( "<li></li>" );

This is the fastest way to wrap .nav-container a inside list element.

While looping $.each('.nav-container a', function(i,v) {}); each <a> are like object NOT at TEXT

if you want target specific elements use:

$.each('.nav-container a', function(i,v) {
var fullObject = $(this).html(),
link = $(this).attr('href'),
text = $(this).text();
});

edited Aug 30 '16 at 14:22

answered Aug 30 '16 at 14:10

Beneris

627
4
11

This isn't an answer, as you've suggested something without any context. This should be a comment. – evolutionxbox Aug 30 '16 at 14:12

score 0 · Answer 6 · answered Aug 30 '16 at 14:16

This is caused by type conversion. When you do '<li>' + item + '</li>' the JavaScript runtime will try to convert item to a string. This is done "under the hood" by calling toString() method on the item, e.g. item.toString(). You can do forced type conversion by doing it explicit:

console.log(i, item.toString());

Jquery each through gives me href only

6 Answers6