href inside loop javascript jquery

Question

i want to loop trough all my delicious.com bookmarks and wrap a link arround them...

here's my testsite: http://dev.thomasveit.com/json.html

$(document).ready(function(){               
        $.ajax({
            url: "http://feeds.delicious.com/v2/json/tommyholiday",
            dataType: "jsonp",
            success: function(data){
                var bookmarks = $.map(data, function(bookmark){
                    return {
                        title: bookmark.d,
                        link: bookmark.u
                    }
                });                 

                var html = "<ul>",
                    m;

                for (i=0; i<bookmarks.length; i++){
                    m = bookmarks[i];

                    html += "<li><a href="+m.link+">"+m.title+"</a></li>";
                }
                html += "</ul>";

                $("#delicious").html(html);

            }                       
        });
});

funnily enough only the third link is getting wrapped by a link... the others not.

what am i doing wrong?

xdazz · Accepted Answer · 2012-06-22 10:27:07Z

3

a href attribute need quotes.

html += "<li><a href="+m.link+">"+m.title+"</a></li>";

should be

html += "<li><a href='"+m.link+"'>"+m.title+"</a></li>";

answered Jun 22, 2012 at 10:27

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denys Séguret Over a year ago

There's a problem in your link, then. It shouldn't contain a space. Or am I missing something ?

xdazz Over a year ago

@dystroy Yes, but when check the must not please. w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted

Stelian Matei · Accepted Answer · 2012-06-22 10:32:49Z

You didn't add quotes " to the href attribute.

For example:

<li><a href=http://www.designtnt.com/500-free-photoshop-patterns-your-web-designs/>500+ Must-Have Free Photoshop Patterns for Your Web Designs</a></li>

If you look at that link, it url ends with / and closes the <a> tag. The text then comes after the a tag and the the last </a> is ignored.

In my opinion the best way to create html tags is to use the DOM for both performance and bugs.

var ul = document.createElement("ul");

// inside the for
var li = document.createElement("li");
var a_tag = document.createElement("a");
a_tag.setAttribute("href", m.link);
a_tag.appendChild(document.createTextNode(m.title));
li.appendChild(a_tag);

// add the li
ul.appendChild(li);

// end for
$("#delicious").html(ul);

Collectives™ on Stack Overflow

href inside loop javascript jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related