使用jQuery查找和操作存儲在變量中的HTML DIV元素

Question

我一直在尋找幾個小時來嘗試找到解決方案，因爲某些原因，在這裏部分相似的答案似乎並不像爲我工作 - 所以我創造了我自己的問題。

基本上，我使用jQuery的$.get方法服務器加載預渲染HTML，我需要拆分返回的HTML分爲兩個部分（一個多數民衆贊成包裹在一個div稱爲#section-one和其他簡單地沿着該分區，沒有父元素）。

請參見下面的例子：

$.get('http://jamie.st/remote_file.php', function(data){ 

    // I want to get '#section-one' and then remove it from data, basically splitting a single returned HTML resource into two, that can be placed in two different areas of the page. 
    var sectionOne = $(data).find('#section-one'); 

    // This should only return the HTML of '#section-one' 
    console.log(sectionOne); 

    // Also how can I then remove '#section-one' from the 'data' variable? The equivalent of calling the below, but from the 'data' variables string/html. 
    $(sectionOne).remove(); 

    // So eventually the below would return the HTML without the '#section-one' element (and it's children) 
    console.log(data); 

}); 

我還創建了一個的jsfiddle，你可以玩的，如果你需要，它的設置使用，我已經主持了演示一個真實的PHP文件目的。

http://jsfiddle.net/6p0spp23/6/

如果你可以提交，將不勝感激一個的jsfiddle鏈接回，在此先感謝傢伙！

Answer 1

當您創建與遠程內容$(data)一個jQuery對象變成元素的集合，所以不是find()要使用filter()像這樣：

$.get('http://jamie.st/remote_file.php', function(data){ 
    var $data = $(data), 
     $sectionOne = $data.filter('#section-one'), 
     $rest = $data.filter(':not(#section-one)'); 

    console.log($sectionOne); 
    console.log($rest); 

}); 

Demo fiddle

Answer 2

當您從派生的jQuery對象中刪除子部分時，原始字符串不會隨更改而更新，因此如果您想要更新的html內容，您需要從jQuery對象生成它。要做到這一點的方法之一是

$.get('http://jamie.st/remote_file.php', function (data) { 

    var $ct = $('<div />', { 
     html: data 
    }); 

    // I want to get '#section-one' and then remove it from data, basically splitting a single returned HTML resource into two, that can be placed in two different areas of the page. 
    var sectionOne = $ct.find('#section-one'); 

    // This should only return the HTML of '#section-one' 
    console.log(sectionOne); 

    // Also how can I then remove '#section-one' from the 'data' variable? The equivilant of calling the below, but from the 'data' variables string/html. 
    $(sectionOne).remove(); 

    // So eventually the below would return the HTML without the '#section-one' element (and it's children) 
    console.log($ct.html()); 

}); 

演示：Fiddle

Answer 3

我認爲把接收到的數據放在父div中的最好方法。然後你可以調用remove或其他方法來使用它。

如果您不想顯示它，可以使用.hide（）方法隱藏父div。

在這裏，我做到了： http://plnkr.co/edit/jQKXyles8sP8dliB7v0K?p=preview

// Add your javascript here 
$(function() { 

$.get('http://jamie.st/remote_file.php', function(data) { 
$("#parent").hide(); 
$("#parent").html(data); 
$("#section-one").remove(); 
console.log($("#section-one").html()) 
alert($("#parent").html()) 

}）;

}）;