Question

问题：我正在为每个img（成功）添加动态类，我也在创建UL和LI（成功）。 li有一个动态类以及2 .list-1（成功）现在，我的最后一篇，我想在li类中移动我的img（失败）。我觉得我接近解决方案，但我无法将Img移到LI内。有什么建议。忘了添加jsfiddle

HTML

<div class="img-list">
    <img src="http://mrminix.wikispaces.com/file/view/red-number-1.jpeg" alt="" />
    <img src="http://varungenius.files.wordpress.com/2012/01/red-number-2.jpg" alt="" />
    <img src="http://www.psdgraphics.com/file/red-number-3.jpg" alt="" />
</div>

的jQuery

$(function () {
    var imgNumber = $('.img-list img').length;
    var ulInfo = "<ul class='list-inf'></ul>";

    $('.img-list').append(ulInfo);

    $('.img-list img').each(function (i) {
        var liInfo = "<li></li>";
        var imgNum = ".img-list-" + (i + 1);
        $(this).addClass("img-list-" + (i + 1));
        $('.list-inf').append(liInfo);
        $(".list-inf li").each(function (i) {
        $(this).addClass("list-" + (i + 1));
        });
    });
});

工作版

 $(function () {
    var imgNumber = $('.img-list img').length;
    var ulInfo = "<ul class='list-inf'></ul>";

    $('.img-list').append(ulInfo);
    $(".list-inf li").each(function (i) {
        var liInfo = $("<li></li>");
        $(this).addClass("list-" + (i + 1));
 });
 $('.img-list img').each(function (i) {
        var imgNum = ".img-list-" + (i + 1);

        $(this).addClass("img-list-" + (i + 1));
        $('.list-inf').append(liInfo);
        $(this).appendTo(liInfo);
   });
  });

Answer 1

首先，通过在liInfo前加上元素创建，使$成为jQuery对象。然后使用appendTo将图片附加到相应的liInfo：

 $('.img-list img').each(function (i) {
        var liInfo = $("<li></li>");
        var imgNum = ".img-list-" + (i + 1);
        $(this).addClass("img-list-" + (i + 1));
        $('.list-inf').append(liInfo);
        $(this).appendTo(liInfo);
});

Demo

此外，这个块：

$(".list-inf li").each(function (i) {
        $(this).addClass("list-" + (i + 1));
});

应该在您的第一个.each()之外，或者可以简单地重写为：

liInfo.addClass("list-" + (i + 1));

将动态类移动到动态类中

1 个答案: