jQuery.load() 检索部分页面内容会导致 DOM 中重复 ID

Question

我目前有一个 JS 函数，允许我使用 jQuery.load() 将部分内容从另一个页面加载到当前页面

但是我注意到，在使用它时，我在 DOM 中得到了重复的 ID(使用 FireBug 检查时)

此函数与 Flash Building View 结合使用，因此它不包含任何从 anchor 标记检索 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" });
    });
}