jQuery 从外部页面获取特定内容

Question

所以我有类似的东西

<ul>
<li> <a href="123.html">123</a></li>
<li> <a href="abc.html">abc</a></li>
</ul>

这个网站在我的 INDEX.HTML 文件中。除了加载更多列表和列表项。链接到的每个 HTML 页面都有这样的部分：

<ul>
<li><strong>Time: </strong>12:00</li>
</ul>

我想要的是当用户看到 INDEX.HTML 页面时，时间被添加到末尾（来自相对链接），所以它看起来像

• 123 - 12:00
• ABC - 13:00

有人可以帮忙吗？我意识到我可能需要 contents() 和 fine() 但没有快速得到。所以基本上对于每个链接，我们都会转到有问题的 URL，抓住时间并将其添加到 INDEX.HTML 上的原始行

谢谢。

Answer 1

思路可以如下：

1. 循环通过lis。
2. 获取a 孩子的href 属性。
3. 向该页面发送 ajax 请求。
4. 使用 jQuery 解析响应并找到合适的文本。
5. 将该文本附加到li。

在 jsFiddle 上生成单独的页面并不容易，因此您必须根据自己的情况对其进行一些修改。此外，您可能希望使选择器更严格（ul strong 是我可以用您的示例弥补的最佳选择）。

http://jsfiddle.net/3JQDz/

$("li").each(function() {
    var $li = $(this);
    var href = $li.find("a").attr("href");  // use this in your real case

    $.ajax({
        type: "POST",
        url: "/echo/html/",  // this is just the way to use ajax on jsFiddle
        data: {
            html: "<ul><li><strong>Time: </strong>12:00</li></ul>"
        },
        success: function(html) {
            // full document -> only the li -> its child nodes -> the last one (the text node) -> its text
            var time = $(html).find("li").contents().last().text();
            $li.append(" - " + time);
        }
    });
});

Answer 2

如果我理解你的问题，我相信你想加载每个内页的内容以在主菜单中显示信息。如果是这种情况，这对性能来说是个坏主意。

如果您想这样做，您首先需要使用$.get 函数加载HTML 内容。然后处理结果，搜索所需的元素。

更新

我更新了sample here。它只有一个链接，但现在与您的代码结构一起显示。

基于此，我相信您的index.html 代码将是这样的：

$("li a").each(function() {
    var src = $(this).attr("href");
    $.get(src, function(data) {
      var element = $("<div>").html(data);
      var time = element.find("li").contents().last().text();
      $("li").append(" - " + time);
    });
});