Question

我试图将一些照片从flickr拉到我的网站，并使用Feed中的随机图片创建了一个类似于以下内容的无序列表。

这应该类似于：

<li><a href='#'><img src='imagesource'/></a></li>

我只看到<img='imagesource'/>被加载到页面。

这是我到目前为止所得到的......任何帮助都将受到赞赏：

if (i <= defaults.limit-1)
{
    var large = (item.media.m).replace('_m.jpg', '_b.jpg');

    // Assign the image with attributes
    flickrImage = $("<img/>").attr({
        src: large,
        class: "gal-image"
    });

    // Push flickr images into array
    flickrImages.push(flickrImage);
}

$('.gal-image').prepend('<li><a class="slide-img" data-lightbox="random" href="' + large + '">');
$('.gal-image').append('</a></li>');

Answer 1

尝试

var flickrImage  = $("<img>").attr({
        "src": large,
        "class": "gal-image"
    }).on("load", function(e) {
  $(this)
  .wrap("<li><a class=slide-img data-lightbox=random href=" + this.src + ">");
});
// as pointed out at comments , not appear where `img` inserted into document ?
$("body").append(flickrImage);

＆＃13;

var img = $("<img>").attr({
        "src": "http://lorempixel.com/400/200",
        "class": "gal-image"
    }).on("load", function(e) {
  $(this)
  .wrap("<li><a class=slide-img data-lightbox=random href=" + this.src + ">");
  $("body").prepend($(this).parents("li")[0].nodeName)
});
$("body").append(img);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

prepend和append在元素内部，而不是在元素周围。我们只需稍微重做逻辑，它就会被修复。

$('.gal-image').appendTo('<a class="slide-img" data-lightbox="random" href="' + large + '">').parent().appendTo('<li>');

那里，完成了！ appendTo将在给定参数的集合中添加集合。在这种情况下，我们将其附加到动态创建的<a>。然后，我们将图片的父级（<a>）添加到此处创建的<li>。

Answer 3

.prepend()和.append()方法分别在开头和结尾插入匹配元素集中的每个元素内容内容。它不会围绕匹配的元素包装内容。

用于包装具有HTML结构的元素

使用.wrap()方法如下：

$('.gal-image').wrap('<li><a class="slide-img" data-lightbox="random" href="' + large + '"></a></li>');

.wrap（）函数可以接受任何可以传递给$（）工厂函数的字符串或对象来指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个inmost元素。此结构的副本将围绕匹配元素集中的每个元素

P.S：jQuery使用DOM创建HTMLString元素并插入DOM，它不会插入结束标记......

如何输出包含在列表和锚中的<img/>？

3 个答案: