Question

我有一个带有预览功能的文章列表，让用户将文章标题悬停在内容的简短预览上，结构如下：

<img id="{article_id}" src="" /><a href="/something.html" id="{article_id}" data-original-title="https://website.tld/path/image.jpg some other text here">Name of the Article</a>

我需要动态获取每个文章预览中图像的链接（在此示例中为＃34; https://website.tld/path/image.jpg＆＃34;）以填充空白＆＃34; img src＆＃34;知道：

每个文章预览中图像的网址不同
{article_id}在每篇文章中都有所不同

这是一个更全面的jsfiddle：https://jsfiddle.net/znnytLrf/2/

我正在考虑使用正则表达式来隔离始终显示在顶部的图像网址，这基本上可以被视为正则表达式中的一个单词，但是我在过去的48小时内感到非常困惑没有任何重大进展。

如何使用jquery实现这一目标？如果没有，或者太过琐碎，你有其他方法可以做到这一点吗？

非常感谢您阅读我的问题。

Answer 1

您使用{article_id}多重时间作为id="article232"等元素的ID。

如果您的意思是“图片网址始终显示在顶部”，图片网址始终位于字符串的开头，您可以使用(?=^https?)(.+?)\s这样的正则表达式取出字符，直到遇到空格。

然后在你的jQuery中，一个可能的选择是：

找到所有锚点并循环它们
抓取data-original-title属性并使用exec获取您要查找的值
然后获取上一个图像元素并使用您找到的值设置它的src属性

例如：

$(document).ready(function () {
    $('div p a').each(function () {
        var myRegexp = /(?=^https?)(.+?)\s/g;
        var match = myRegexp.exec($(this).attr("data-original-title"));
        if (match && match[1]) {
            $(this).prev("img").attr("src", match[1]);
        }
    });
});

Fiddle

从div元素获取img并将其用作另一个元素的src

1 个答案: