0

我正在构建一个站点，我想在其中使用 AJAX 将 HTML 页面上目标 div 中的内容替换为其他 HTML 页面上包含的 div 中的内容，并通过更改指向哈希的链接并附加到现有 url 来导航。

我可以使用以下 JQuery 代码来实现这一点，并使用 >load() 函数替换单个目标 div：

$(document).ready(function(){
    $('.sf-menu a').bind('click', function(){
        var url = $(this).attr('href');
        $("#middle .center .inner").load( url + ' #middle .center .inner > *');
        return false;
    });
});

但是 .load() 的局限性在于它不能针对多个元素，这就是我需要做的。

如果我可以使用另一种方法以 .load 的工作方式替换目标 div 中的内容，那将是理想的，但是任何允许我用另一个页面的内容替换多个 div 中的内容的解决方案都将受到欢迎。

看来我可以按照这些思路做点什么：（忍受我……新的……）

$.get(URL, function(data) {
    $("#content").html($(data).find('#middle .center .inner '));
    $("#content").html($(data).find('#middle .right .inner '))
});

但是我可以找到的任何示例都将检索到的内容附加到某处，这仍然让我需要删除现有内容并且我不确定如何继续

然后有人建议我应该将 .ajax 用于这样的事情，所以从我看到的一些例子中，我正在寻找类似的东西：

$.ajax({
    url: 'somepage.html',
    dataType: 'html',
    success: function(data) {
    $('#middle .center .inner > *').html($(data).filter('#middle .center .inner').html());
}

但我无法让它发挥作用，所以我一定把它搞砸了。

关于我做错了什么或我应该关注的地方有什么建议吗？

4

1 回答 1

0

你所做的几乎是正确的。只需对您的代码稍加调整即可完成这项工作。

我认为您应该执行以下操作

$.ajax({
    url: 'somepage.html',
    dataType: 'html',
    success: function(data) {
    $('#middle').html($(data).find('#middle').html()); //adding #middle to #middle
    $('.center').html($(data).find('.center').html()); // adding .center to .center
    $('.inner').html($(data).find('.inner').html()); // adding .inner to .inner
}

我假设在两个页面上都有#middle三个不同的元素.center。.inner

更新以下行将使用请求数据中的所有内容（在里面 which is inside ）替换.inner里面.center的#middle所有内容.inner（which is inside .centerwhich is inside #middle）。

$('#middle .center .inner').html($(data).find('#middle .center .inner').html());

如果两个元素相同，您可以安全地调用上面的行，并且里面的所有.inner内容都将成为.inner其他页面中的内容。但是，如果您必须在内部独立设置 div ，则必须为两个页面上.inner的每个项目都提供 id 。.inner

于 2013-06-28T07:26:36.710 回答