0

I want create a new <li> component, then add href, class, etc.. and finally place it in another element.

I thought this would work, but it doesn't:

var points = [1, 2, 3, 4];

$.each(points , function(){
    var $elm = $('<a>'+'Point:'+$(this)+'</a>');
    $elm.css('point');
    $elm.attr('href','http://somelink');
    $('#points_list').append('<li>'+$elm+'</li>');
});

The html code is:

<ul id="points_list"/>

The output is:

  • Object
  • Object
  • Object
  • Object
    • Ben
    • 10,020
    • 21
    • 94
    • 157

    5 Answers5

    3

    That JavaScript is invalid (the first line is a syntax error). I see you've corrected it.

    I think this may be what you mean (I've had to guess at the css bit, I assume you meant to add that as a class) (live copy):

    var points = [1, 2, 3, 4];

$.each(points, function(index, point) {
    var anchor, li;

    anchor = $('<a>Point:' + point + '</a>');
    anchor.addClass('point');
    anchor.attr('href','http://somelink');
    li = $("<li>");
    li.append(anchor);
    $('#points_list').append(li);
});

    But it can be simpler:

    var points = [1, 2, 3, 4];

$.each(points, function(index, point) {
    $('#points_list').append(
        '<li><a class="point" href="http://somelink">Point:' + point + '</a></li>'
    );
});

    I'd also recommend looking up the points_list once and then reusing the reference:

    var points = [1, 2, 3, 4];
var list = $('#points_list');
$.each(points , function(index, point){
    list.append(
        '<li><a class="point" href="http://somelink">Point:' + point + '</a></li>'
    );
});

    ...since even looking things up by id is not free.

    T.J. Crowder
    • 1,031,962
    • 187
    • 1,923
    • 1,875
    • Thank you very much for a detailed explanation. I am more interested in the first type for self-educational reasons. :-) It doesn't work for me though. Could you kindly take a quick look at this and see if you can tell what's wrong with it? (It's based on your answer) http://dl.dropbox.com/u/80497/test.html – Ben Jul 24 '11 at 09:54
    • 1
      @Ben: The problem there is that your code is running before the list element has been created, so although everything is working, there's no element to append the list items to. Either move the `script` tag to the end, *after* the list element, or wrap your code in a [`jQuery.ready`](http://api.jquery.com/ready/) callback. I've added a live example to the answer. – T.J. Crowder Jul 24 '11 at 10:00
    1

    You have a few things wrong.

    Here is a working demo: http://jsfiddle.net/ReTjP/

    HTML Code:

    <ul id="points_list"/>
<input type="submit" value="go" id="go" />

    Javascript:

    $("#go").click(function() {

    var points = [1, 2, 3, 4];

    $.each(points, function(index, value) {
        var elm = $('<a>' + 'Point:' + value + '</a>');
        elm.css('point');
        elm.attr('href', 'http://somelink');
        $('#points_list').append('<li>' + elm.html() + '</li>');
    });   
});
    Martin
    • 10,294
    • 11
    • 63
    • 83
    0
    var points = [1,2,3,4];
$.each(points, function(index,value){
    $('<a>').html('Point:' + value).addClass('point').attr('href','http://somelink').appendTo('#points_list').wrap('<li />');
});

    Working demo: http://jsfiddle.net/AlienWebguy/vbF6Z/2/

    AlienWebguy
    • 76,997
    • 17
    • 122
    • 145
    0

    You may try this 

       var points = [1, 2, 3, 4];

    $.each(points , function(){
      var $elm = $('<li><a>Point:'+$(this)[0]+'</a></li>');
      $elm.css('point');
      $('a', $elm).attr('href','http://somelink');
      $('#points_list').append($elm);
    });
    Atiqul Alam
    • 181
    • 4
    -1

    try thisvar points = [1, 2, 3, 4];

    $.each(points , function(){
   var $elm = '<a class="point" href="http://somelink">'+'Point:'+$(this)+'</a>';
   $('#points_list').append('<li>'+$elm+'</li>');
});
    Amir Ismail
    • 3,865
    • 3
    • 20
    • 33