Question

我正在尝试从ajax下载页面中提取元素，以便稍后将其附加到DOM。我正在拿这样的页面：

    $.ajax({
        url: pagePath,
        success: function (data) { 
            //data is correctly shown in debugger, all the elements exist.

            var $div = $(data).find("[data-custom-attr]").first();
            //$(data) has lenght > 0, however $div has length 0!
            //$(data).find("#ajaxpage") also has lenght 0!
        },
        dataType: "html"
    });

这是获取的页面：

    <!DOCTYPE html>
    <html>
        <head>      
        </head>
        <body>
            <div id="ajaxpage" data-custom-attr="ajaxpage">
                <h2>Ajax downloaded page!</h2>          
            </div>      
        </body>
    </html>

我尝试过几个不同的选择器，每个人都失败了。我觉得代码中的某个地方肯定有一个非常愚蠢的错误但是看不到它。

这些选择器有什么问题？

Answer 1

原因是jQuery抛弃了你给它的所有废话，只用h2解析div：

$("<!DOCTYPE html><html><head></head><body><div id='ajaxpage' data-custom-attr='ajaxpage'><h2>Ajax downloaded page!</h2></div></body></html")

与

完全相同

$("<div id='ajaxpage' data-custom-attr='ajaxpage'><h2>Ajax downloaded page!</h2></div>")

（jQuery的$（“...”）不会创建完整的文档，它只会构建DOM片段）

由于第一个元素已经是你的div，你在其子树中找不到[data-custom-attr]，因此结果将是[]。如果你执行了find("h2")，那么它将正常工作，因为它位于div的子树中，但你不能find div本身。

Answer 2

var $div = $('<div/>').html(data).find("[data-custom-attr]").first();

Answer 3

试试这个：

var $div = $('<div></div>').html(data).find("[data-custom-attr]").first();

jQuery：选择器无法通过ajax下载页面工作

3 个答案: