Question

我正在构建一个网站，我希望使用AJAX替换HTML页面上目标div中的内容，其中包含其他HTML页面上包含的div的内容，并通过更改哈希链接并附加到现有网址进行导航。

我可以使用以下JQuery代码来实现这一点，并使用＆gt; 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（）是有限的，因为它无法定位多个元素，这就是我需要做的事情。

如果我可以使用另一种方法替换目标div中的内容，那将是理想的.load工作，但任何允许我用多个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());
}

但我无法让它发挥作用所以我必须把它搞砸到某个地方。

关于我做错了什么或我应该关注什么的任何建议？

Answer 1

你在做什么几乎是正确的。只需对您的代码进行一些调整即可。

我认为你应该做以下事情

$.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。

更新以下行将替换.inner内的所有内容（位于.center内的#middle内）.inner内的所有内容（位于.center内来自请求数据的#middle}内部。

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

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

如何使用JQuery将一个页面上的div的HTML内容加载到另一个页面上的多个div中？

1 个答案: