JQuery - 遍历多个元素并替换 src 和 href答案

【问题标题】：JQuery - iterating through multiple elements and replacing src and hrefJQuery - 遍历多个元素并替换 src 和 href
【发布时间】：2023-03-18 15:15:02
【问题描述】：

我正在制作一个存储数千张图片的图片库网站。为避免客户端滞后，我想添加分页功能，以便在用户单击下一个/上一个按钮浏览图像时一次仅获取 X 个图像。

点击按钮时向后端发送一个包含页码的AJAX请求，后端返回data.images中新的分页图片文件名

我的目标是遍历 HTML 中的每个图像 src 和 href 属性，并将值替换为新的图像文件名路径，以便新图像显示在网页上。

HTML：

<main class="row">
    {% for image in data["images"] %}
        <div class="image">
            <a href="static/images/{{ image.filename }}"  target="_blank">
                <img alt="image" src="static/images/{{ image.filename }}">
            </a>
        </div>
    {% endfor %}
</main>

jQuery:

$('button').click(function() {

    $.ajax({
        url: "/get_images",
        type: "GET",
        data: { 
            page: 2,
        },
        success: function(data) {
            // the backend successfully returns the new image filenames in data.images
            console.log(data.images);

            // not exactly sure what to add here
            // to iterate through all of the elements and replace each href and src with the new image filename
        },
    });
});

【问题讨论】：

一个for 循环可能吗？
谢谢，你能举个例子吗？

标签： javascript jquery html ajax jinja2

【解决方案1】：

试试这样。为标签分配一些动态属性。使用动态属性id的修改src和href在ajax成功函数中执行for循环。

$('button').click(function() {

    $.ajax({
        url: "/get_images",
        type: "GET",
        data: { 
            page: 2,
        },
        success: function(data) {
          for (i = 0; i < data.images.length; i++) {
            var id = "static/images/"+data.images[i];
            $("[imageid='image"+i+"']").attr('src', id);
            $("[hrefid='image"+i+"']").attr('href', id); 
          }
        },
    });
});

<main class="row">
    {% var i=0; %}
    {% for image in data["images"] %}
        <div class="image">
            <a href="static/images/{{ image.filename }}"  target="_blank" hrefid="image"+i>
                <img alt="image" src="static/images/{{ image.filename }}" imageid="image"+i>
            </a>
        </div>
     {% i++   %}
    {% endfor %}
</main>

【讨论】：