2013-06-28 85 views
0

我正在构建一个网站,我想用AJAX来替换HTML页面上的目标div中的内容,并使用其他HTML页面中包含的div的内容替换内容,并通过将链接更改为哈希并追加到现有url来进行导航。如何从一页上的div加载HTML内容到另一个页面上的多个div使用JQuery?

我可以使用下面的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()是有限的,因为它不能定位多个元素,这就是我需要做的。

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

看来我可以做的东西沿着这些路线:(在此包涵......新......)

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

,但任何的例子我能找到的地方追加检索到的内容,这仍然让我需要删除现有的内容和我不知道如何着手

这时,有人建议我应该使用阿贾克斯这样的事情所以从一些例子我已经看到我在看类似:

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

但我不能让它起作用,所以我一定把它弄糟了。

任何关于我在做什么错的建议或我应该关注的地方?

回答

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

更新 下面一行将取代内部.inner每一件事情(这是内部.center这里面#middle)的一切,这是内部.inner(这是内部.center这里面#middle)从所请求的数据。

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

如果这两个元素是一样的,你可以安全地调用上面的线和每一件事情里面.inner会变成什么样曾在.inner从其他页面。但是,如果您必须在.inner以内独立设置div,则必须在两页上的.inner中的每个项目都提供id。

+0

对不起..不清楚..我的意思是暗指针对嵌套的div,即目标'.inner'嵌套在'.center'嵌套在'#middle'内,并且还有其他.inner div定位别处。这会使我的代码非常复杂吗?我应该给我想要定位唯一ID的DIV吗? – user2414560

+0

@ User2414560看到我更新的答案 –

+0

Got it!谢谢。 – user2414560

相关问题