Question

我目前有一个JS函数，允许我使用jQuery.load（）

将其他页面的部分内容加载到当前页面

但是我注意到在使用它时我在DOM中获得了一个重复的ID（当使用FireBug进行检查时）

此功能与Flash Building视图结合使用，因此它不包含任何从锚标记中检索URL的代码。

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

上面的代码在检索内容时效果很好，但是当我用firebug进行检查时，我得到的结果就是这样。

<div id="apartmentInfo">
    <div id="apartmentInfo">
        <!-- Remote HTML here..... -->
    </div>
</div>

任何人都可以建议如何删除重复的div？

谢谢，沃伦

Answer 1

如果只是导致您烦恼的ID，您可以更改该ID，或者在加载文档时删除副本：

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        $(this).attr('id', 'somethingElse'); //change the id
        // OR
        $(this).children().unwrap(); // remove the second apartmentId from the DOM completely.

        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

如果它是多个ID，我能想到的唯一解决方案是在远程页面中为所有ID添加前缀，或者在IFRAME中加载远程页面。

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        $(this).find('*[id]').andSelf().attr('id', function (index, previous) {
            return 'a-random-prefix-' + previous;
        });

        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

Answer 2

绕道而行

function displayApartment(apartmentID) {
    var parent = $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        parent.children(':first').unwrap();
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

Answer 3

只需使用：

#apartmentInfo > *

完整代码：

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo > *", function () {
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

Answer 4

我来到这里感谢 Google 寻找我认为OP真正想要的东西;在没有周围div的情况下，$(selector).load('my.html #apartmentInfo')的内容全部的方法。

E.g：

<div id='apartmentInfo' data-from="main page">
    Address: 123 Hell Street
    <p>Manager: Hugh Jass</p>
    ...
</div>

...而不是$('#apartmentInfo').load('my.html #apartmentInfo')的默认行为导致：

<div id='apartmentInfo' data-from="main page">
    <div id='apartmentInfo' data-from="my.html">
        Address: 123 Hell Street
        <p>Manager: Hugh Jass</p>
        ...
    </div>
</div>

以上.unwrap()的使用非常接近，但结果如下：

<div id='apartmentInfo' data-from="my.html">
    Address: 123 Hell Street
    <p>Manager: Hugh Jass</p>
    ...
</div>

...如果你在data-from="main page" div上设置的任何属性都没有在data-from="my.html" div上设置，那么这是一个问题，因为它们会丢失。

以下代码在删除data-from="main page" div data-from="my.html"时隐藏了.load div：

var $apartmentInfo = $('#apartmentInfo'),
    $tempApartmentInfo = $apartmentInfo.clone()
;

$tempApartmentInfo.contents().remove();

$tempApartmentInfo.load('my.html #apartmentInfo', function (response, status, xhr) {
    $tempApartmentInfo.children().each(function () {
        $apartmentInfo.append($(this).contents());
    });
});

此代码避免了OP所描述的重复ID的所有问题（但远程#apartmentInfo的内容可能具有重复的ID），因为永远不会加载data-from="my.html" div由于使用了分离的$tempApartmentInfo。

，因此进入DOM

或者......这里又是一个名为loadContents的jQuery插件：

//# .load the specified content while stripping the outer-most container
jQuery.fn.loadContents = function (url, data, complete) {
    var $target = $(this),
        $tempTarget = $target.clone()
    ;

    //# Clear out the $tempTarget so we are left with only the base element
    $tempTarget.contents().remove();

    //# Pass the call off to .load to do the heavy lifting
    $tempTarget.load(url, data, function (response, status, xhr) {
        //# Traverse the .children, .appending the .load'ed .contents of each child back into the $target as we go
        $tempTarget.children().each(function () {
            $target.append($(this).contents());
        });

        //# If the passed complete is a function, call it now
        if (Object.prototype.toString.call(complete) == '[object Function]') { complete(response, status, xhr); }
    });
};

注意：此插件始终会删除已加载内容中的最外层元素。另请注意，与jQuery的原生.load不同，此插件不会删除$target中的当前内容，而是.append .load内容$target {1}}。

jQuery.load（）检索部分页面内容会导致DOM中出现重复的ID

4 个答案: