在 jQuery 中从 html 页面中提取图像答案

【问题标题】：Pulling images from an html page in jQuery在 jQuery 中从 html 页面中提取图像
【发布时间】：2014-12-19 19:12:43
【问题描述】：

我的任务是从 html 页面中提取图像，只使用 jQuery 而不使用其他任何东西。

html 页面是一个包含许多表格和许多不同 png 的页面。在大约 400 行 html 中，大约有 80 张图片。我的工作是将具有特定域的所有图像放到页面底部（div class="code"> 部分），然后我可以手动浏览它们以保存它们。

到目前为止，我能够获得所有图像的 src，但我不确定如何获得所有实际图像。我在想如果我要将源保存在一个变量中，我可以将每个循环重定向到一个 img 标记并将其提供给图像源。到目前为止，它只返回一个损坏的 img 链接，所以我认为我的想法是正确的，但不是正确的代码。

这是我的 js

$(document).ready(function(){
            $("img[src*='tieks']").each(function() {  // src* so I only get certain images
               imgsrc = this.src;
               $(".code").append(imgsrc);
            }); 
   });

这是代码部分

<div class="code">
    <img src=imgsrc>
</div>

有谁知道我该如何解决这个问题？

【问题讨论】：

不清楚。您的 HTML 只有一个图像。它们是从哪里拉出来的，你需要把它们放在哪里？
pull images from page 是什么意思？
当您说保存它们时，如果有帮助，可以将列表记录到浏览器控制台。不确定save 是什么意思。或者您可以遍历它们并为每个服务器向服务器发出 ajax 请求。在过去，我什至在控制台中创建了 sql insert 语句。然后将这些语句直接复制到数据库工具中，并立即将它们插入数据库中

标签： javascript jquery

【解决方案1】：

您尝试的编码是正确的。您仅获取图像源。如果您想获取所有原始图像并使用“代码”类附加到 div，您将尝试更改

$("img[src*='tieks']").each(function() {

    $(".code").append(this);

});

试试吧。

【讨论】：

【解决方案2】：

如果您只想将所有图像克隆到一个容器中：

$('.code').append( $("img[src*='tieks']").clone() );

clone() API Docs

【讨论】：

【解决方案3】：

诀窍是创建一个新元素并将其附加到您的 div 或您喜欢的任何内容中。

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

这也在这个线程中得到了回答，上面的例子来自：How to create a new img tag with JQuery, with the src and id from a JavaScript object?

【讨论】：

最好更改每个图像的 id，而不是为所有图像使用 dynamic。