Question

我一直在寻找几个小时来尝试找到问题的解决方案，因为某种原因在这里部分相似的答案似乎并不适合我 - 所以我是创造我自己的问题。

基本上，我是使用jQuery的$.get方法从服务器加载预呈现的HTML，我需要将返回的HTML拆分为两个部分（一个包裹的部分）在一个名为#section-one的div中，另一个只是与该div一起，没有父元素。）

请参阅以下示例：

$.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()，而是像$.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); });那样使用filter()：

{{1}}

<强> Demo fiddle

Answer 2

我认为将接收到的数据放在父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())

}）;

Answer 3

从派生的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

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

3 个答案: