Question

我在这里有点困惑。我想有这种结构。

<ul class="cont">
    <li>
        <a href="http://www.youtube.com/watch?v=my_video_id" title="My title">
            <img alt="my alt" src="http://img.youtube.com/vi/my_video_id/default.jpg" <="" a="">
        </a>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

我是这样做的，

list_data += '<li><a href="' + url + '" title="' 
        + feedTitle + '"><img alt="' + feedTitle + '" src="' 
        + thumb + '"</a></li>';

因为我想要逃避标题（以及我在这里避免的问题的抽象视图的描述），我试图用jQuery方式来做。即，

    $('<img/>').attr({
        alt: feedTitle,
        src: thumb
    }).wrap('<a/>').attr({
        id: 'id_' + videoID,
        href: url,
        title: description,
        rel: 'external'
    }).wrap('<li/>').attr({
        class: 'video'
    }).appendTo(".cont");

这不起作用。我做的事情非常错误。如何纠正？
JSFIDDLE：http://jsfiddle.net/e54VX/

Answer 1

来自wrap的{{3}}：

此方法返回用于链接目的的原始元素集。

如果您想使用外部元素而不是内部元素，则需要在每个.parent()之后调用wrap。

$('<img/>').attr({
    alt: feedTitle,
    src: thumb
}).wrap('<a/>').parent().attr({
    id: 'id_' + videoID,
    href: url,
    title: description,
    rel: 'external'
}).wrap('<li/>').parent().attr({
    class: 'video'
}).appendTo(".cont");

docs

使用jQuery创建嵌套元素

1 个答案: