javascript - 如何使用 jquery 使用 name 属性解析远程页面中的图像？

Question

由于内部站点设置的情况，我试图从本地页面解析一系列图像，并通过将名称属性与文章名称匹配来将图像信息传递到另一个本地页面。我正在寻找图像的 src 和 class 属性。

这两个页​​面位于同一域中，但一个页面包含一系列图像，另一个页面包含我们的标准页面布局，该布局将使用 JS 和 CSS 的组合进行样式设置。包含图像的页面更像是一系列图像的存储库。

注意:我知道如果我们使用服务器端，这可以很容易地实现，但是由于这种设置的情况，我们必须在前端提出一些东西。

最终结果将是主页上的列表，其中每个文章列表旁边都放置了存储库页面中的相应图像。

这是我到目前为止所拥有的:

<!-- HTML ON IMAGE REPO PAGE -->
<img src="/path/to/my/image/repo/image_01.jpg" name="article_01" />
<img src="/path/to/my/image/repo/image_02.gif" name="article_02" />
<img src="/path/to/my/image/repo/image_03.png" name="article_03" />
<img src="/path/to/my/image/repo/image_04.jpg" name="article_04" />
<img src="/path/to/my/image/repo/image_05.gif" name="article_05" />
<img src="/path/to/my/image/repo/image_06.jpg" name="article_06" />

<!-- HTML ON MAIN PAGE -->
... HTML code blah blah blah ...
<div class="imageCnt">
    <div class="listItem"><a href="/path/to/my/article_01.html">Cool Article 1</a></div>
    <div class="listItem"><a href="/path/to/my/article_02.html">Cool Article 2</a></div>
    <div class="listItem"><a href="/path/to/my/article_03.html">Cool Article 3</a></div>
    <div class="listItem"><a href="/path/to/my/article_04.html">Cool Article 4</a></div>
    <div class="listItem"><a href="/path/to/my/article_05.html">Cool Article 5</a></div>
    <div class="listItem"><a href="/path/to/my/article_06.html">Cool Article 6</a></div>
</div>
... HTML code blah blah blah ...


<!-- JS ON MAIN PAGE -->
<script type="text/javascript">
$(document).ready(function() {
    var imageContainer = "/path/to/image/page_2.html";
    var imageFileSrc;

    imageFileSrc = $.post(imageContainer); // Thought it best to store posted page data in a variable

    $('.imageCnt').find('a').each(function(index) {

        // First, get the article name
        var thisUrl = $(this).attr('href').split("/");
        var articleUrl = thisUrl[3].split(".");
        articleName = articleUrl[0];

        // Then, find the image based on the name
        var imageSrc = $("[name*="+articleName+"]"); // This is where I'm lost!? :)
    });

});
</script>

有什么想法吗？ :)

Answer 1

尝试修改:

var imageSrc = $('img[name="'+articleName+'"]');