2013-06-28 84 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

相關問題