0

问题：我正在为每个 img 添加动态类（成功），我还创建了一个 UL 和 LI（成功）。li 也有一个动态类 2 .list-1(success) 现在，我的最后一部分是我想在 li 类中移动我的 img（失败）。我觉得我接近解决方案，但我无法在 LI 内移动 Img。有什么建议么。忘记添加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);
   });
  });
4

1 回答 1

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

应该在你的 first 之外.each()，或者可以简单地重写为：

liInfo.addClass("list-" + (i + 1));
于 2013-05-24T18:18:35.677 回答