0

問題: 各 img に動的クラスを追加しています (成功)。UL と LI (成功) も作成しています。li にも動的クラスがあります。解決に近づいていると感じていますが、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));
});

最初.each()の の外に置くか、単に次のように書き換えることができます。

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