Question

我想创建一个新的<li>组件，然后添加href，class等，最后将它放在另一个元素中。

我认为这样可行，但事实并非如此：

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>');
});

html代码是：

<ul id="points_list"/>

输出结果为：

对象

Answer 1

~~JavaScript无效（第一行是语法错误）。~~ 我看到你已经纠正了它。

我认为这可能就是你的意思（我不得不猜测css位，我假设你打算把它作为一个类添加）（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);
});

但它可以更简单：

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>'
    );
});

我还建议您查看points_list 一次，然后重复使用参考：

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>'
    );
});

...因为即使按id查找内容也不是免费的。

Answer 2

你有一些错误。

这是一个有效的演示：http://jsfiddle.net/ReTjP/

HTML代码：

<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>');
    });   
});

Answer 3

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 />');
});

工作演示：http://jsfiddle.net/AlienWebguy/vbF6Z/2/

Answer 4

你可以试试这个

   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);
    });

Answer 5

尝试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>');
});

如何使用jquery创建新组件，更改它并最终放入另一个组件

5 个答案: