Question

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

2个页面位于同一个域中，但是一个页面包含一系列图像，另一个页面包含我们的标准页面布局，将使用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+'"]');

Answer 2

从未尝试过，但这似乎有效......

http://forum.jquery.com/topic/link-to-another-page-and-execute-jquery-there （这只是一个链接）

编辑：你也可以试试：

$.get('filename.html', function(data) {
$('.class_name',data).html(); //returns the HTML of .class_name inside of filename.html
});

http://api.jquery.com/jQuery.get/

Answer 3

首先，您在选择获取文件名的网址路径时遇到错误，您thisUrl[3]应该是thisUrl[4]

试试这个

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

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

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

这是有效的fiddle

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

3 个答案: