Question

我正在使用的代码在这里：https://gist.github.com/783947

想知道我如何围绕化身和链接包装列表项如下：

<li class="entry"><img src="gravatar.png"><a href="#">@twittername</a></li>

我看过.prepend和.append以及.wrap，但这些似乎无法抓取多个html元素，将它们视为一个组并在它们周围包装一个html元素。（我很可能是错的。）

我也承认我对jQuery sytax并不是很熟悉，所以这可能是一个n00b问题。

提前感谢您的帮助！

Answer 1

在很长的路上写出来，这样你就可以更好地了解它的用途。

编辑：是的，我应该包括“包裹在李”部分，嗯？

        var $img = $('<img />')
                .addClass('avatar')
                .attr('src', "http://wil.to/img/200x200"),

            $link = $('<a />')
                .attr('href', "http://www.gravatar.com/avatar/" + entriesObject.Field17)
                .text("@" + entriesObject.Field17)
                .after($img);

            $('#people').append($link).wrapInner('<li />');

Answer 2

将您创建的<img>和<a>保存到变量img和a中，然后：

$('<li class="entry">').append(img).append(a).appendTo('#people');

在您的代码中，这看起来像：

var img, a; // declare the two variables you'll be using

if (entriesObject.Field3 != "") {
    // Save the <img> to a variable after creating it
    img = $("<img />", {
        class: "avatar",
        src: "http://www.gravatar.com/avatar/" + MD5(entriesObject.Field3)
    }); // Don't append yet
}

if (entriesObject.Field17 != "") {
    a = $("<a />", {
        href: "http://twitter.com/" + entriesObject.Field17,
        html: "<p>@" + entriesObject.Field17 + "</p>"
    });
}

// Append to list here
$('<li class="entry">').append(img).append(a).appendTo('#people');

Answer 3

扩展您的代码和Box9的答案：

// Field3 is the email field on this particular form
var $li= $('<li class="entry">');//CRETAE NEW LIST ITEM
if (entriesObject.Field3 != "") {

    $("<img />", {class: "avatar",src: "http://www.gravatar.com/avatar/" + 
                                    MD5(entriesObject.Field3)}).appendTo($li);
}

// check if twitter name is not empty
if (entriesObject.Field17 != "") {
    $("<a />", {href: "http://twitter.com/" + entriesObject.Field17,
                html: "<p>@"+ entriesObject.Field17 + "</p>"}).appendTo($li);   
}
$li.$("#people") //APPEND to PEOPLE

在<li> </li>中为每个循环包装jQuery

3 个答案: