Php 如何在jquery上使用循环来缩短我当前的代码？

我有一个由10个缩略图组成的网站，我使用php查询mysql来检索数据，我成功地一个一个地检索和显示了它，现在我想缩短我的代码，但我需要一些指导

HTML

php

JQUERY

$.ajax({
        type: "POST",
        dataType: "json",
        url: "CMS/PHP/displayFeatThumbs.php",
        success: function(data) {
            $(".img_thumb_holder:nth(0)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[0].links);
            $(".img_thumb_holder:nth(0) .caption").html("<span>" + data[0].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");

            $(".img_thumb_holder:nth(1)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[1].links);
            $(".img_thumb_holder:nth(1) .caption").html("<span>" + data[1].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(2)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[2].links);
            $(".img_thumb_holder:nth(2) .caption").html("<span>" + data[2].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(3)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[3].links);
            $(".img_thumb_holder:nth(3) .caption").html("<span>" + data[3].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
            alert(data[3].links);
            alert(data[2].links);


            $(".img_thumb_holder:nth(4)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[4].links);
            $(".img_thumb_holder:nth(4) .caption").html("<span>" + data[4].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(5)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[5].links);
            $(".img_thumb_holder:nth(5) .caption").html("<span>" + data[5].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(6)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[6].links);
            $(".img_thumb_holder:nth(6) .caption").html("<span>" + data[6].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(7)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[7].links);
            $(".img_thumb_holder:nth(7) .caption").html("<span>" + data[7].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(8)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[8].links);
            $(".img_thumb_holder:nth(8) .caption").html("<span>" + data[8].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");


            $(".img_thumb_holder:nth(9)").children("img").attr("src", "http://localhost/testdatabase/cms/" + data[9].links);
            $(".img_thumb_holder:nth(9) .caption").html("<span>" + data[9].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
        }
    });

---

正如你在我的jquery上看到的，我只是对我想展示的图像保持器的其余部分重复它，我知道我可以使用循环来完成这项工作，但我不确定如何完成。另一个问题是，在我的php上，如果每个用户存储一个图像，一切都会顺利进行，但是如果我在一个用户上存储了两个图像，它会在下一个用户之前显示出该用户的所有作品，我如何才能这样做，使它只检索每个用户一个图像而不是所有图像？谢谢

像这样的

$.ajax({
        type: "POST",
        dataType: "json",
        url: "CMS/PHP/displayFeatThumbs.php",
        success: function(data) {
            $('.img thumb_holder img').each(function(index, element) {
                   // Work out the data to set
                   var imageUrl = "http://localhost/testdatabase/cms" + data[index].links;
                   var captionHtml = "<span>" + data[index].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>"
                   // Now apply this to the elements
                   $(element)
                      .attr("src", imageUrl);
                   $(element)
                      .next()
                      .html(captionHtml);
            });
         });

---

您可以从PHP创建html视图节，然后将其返回到ajax函数

PHP

$'.img_thumb_holder'.追加数据；如果您需要保留旧图像，并且底部的新图像列表将更新，则可以使用

$('.img_thumb_holder').html(data);

可以使用，以便用新图像替换旧图像。

---

在代码中，数据在服务器端和客户端上循环。

在成功回调中，执行以下操作：

var container = $('.img_thumb_holder');

data.forEach(function (item, i) {
  var div = container.append('<div>')
      div.append('<img class="img_thumb" src="'+data[i].links+'">')
      div.append('<h1 class="caption">'+data[i].caption+'</h1>') 
})

你可以像

---

你知道什么是循环是正确的吗？什么是：n选择符或查看@Arun，我的所有图像共享同一个类，因此我使用：n选择符指定我希望该支架显示某个图像，使用该支架后，我使用以下方法移动到下一个支架：nth@robbmj我愿意，但我在循环方面很弱，所以经常会感到困惑。我比其他答案更了解这一点，我将尝试一下。每次循环后，u作为参数插入的索引和元素将动态增加。我这样说对吗？是的，循环中的每个元素都会调用一次函数，每次调用时索引和元素参数都会更改。好的，我了解索引部分，但对于您使用的元素$element.children，对于每一次跑步，不就是比如1.children和2.children吗？或者你只是给我举个例子，所以我需要把它写成：nth1.children:nth2.children？@Devon:我太粗心了。它应该是您正在迭代的子项。我现在就修。幸好我对你的代码理解得够多了。。唯一不确定的是参数，但现在我明白了这是好的！现在就去测试它！

while ($row = mysqli_fetch_assoc($result)) {
    $html_data = '<div class="img_thumb_holder float-l">
                    <img class="img_thumb" src="' . $row["Link"] . '">
                    <h2 class="caption">' . $row["Name"] . '</h2>
                </div>';
}
echo json_encode($html_data);

$.ajax({
    type: "POST",
    dataType: "html",
    url: "CMS/PHP/displayFeatThumbs.php",
    success: function (data) {
        //$('.img_thumb_holder').append(data);
        $('.img_thumb_holder').html(data);
    }
});

$('.img_thumb_holder').html(data);

var container = $('.img_thumb_holder');

data.forEach(function (item, i) {
  var div = container.append('<div>')
      div.append('<img class="img_thumb" src="'+data[i].links+'">')
      div.append('<h1 class="caption">'+data[i].caption+'</h1>') 
})

//cache the holder elements
var $holders = $(".img_thumb_holder");
$.each(data, function (i, dt) {
    //access the hodler at index i
    var $holder = $holders.eq(i);
    //set the corresponding values inside each holder
    $holder.children("img").attr("src", "http://localhost/testdatabase/cms/" + dt.links);
    $holder.find(".caption").html("<span>" + dt.caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + "Portfolio" + "</span>");
})