4

我正在用 JQuery find 做一些测试，我有一个来自 AJAX 请求的 html 响应，所以最初的结果是这样的。

<!DOCTYPE html>
<html>
<body>   
      <div id="dashboard">
        <div id="dash2">
            <h1>Hi</h1>
        </div>
    </div>
</body>
</html>

在我的 Ajax 成功代码中是这样的..

success : function(response,status) {                       
    console.log( $(response).find('#dashboard').html() );
}

在控制台上打印它给我一个undefined.

但是，当我将响应页面（我创建了一个嵌套 div）修改为此

<!DOCTYPE html>
<html>
<body>
        <div id="div1">
            <div id="dashboard">
                <div id="dash2">
                    <h1>Hi</h1>
                </div>
            </div>
        </div>
</body>
</html>

我返回的 Ajax Success 代码中的行 console.log( $(response).find('#dashboard').html() );返回了 

<div id="dash2">
    <h1>Hi</h1>
</div>

我的问题，第一个 HTML 怎么会在这样做console.log( $(response).find('#dashboard').html() );时给我一个未定义的，但是在第二个 HTML（嵌套在 div 中的那个）给了我#dashboard（我期望得到的那个）的内容。

4

2 回答 2

4

据我所知，这是一个依赖于浏览器的行为，哪些标签作为卫生措施被丢弃，例如<head/>.

#dashboard执行时找不到原因

$(response).find('#dashboard')

很可能是因为#dashboard在消毒之后已经成为根元素，并且.find()匹配到不在根本身上的后代元素。

我通常为了避免这个问题在一个空的<div>.

$("<div/>").html(response).find('#dashboard')
于 2013-02-03T23:26:25.027 回答
0

jQuery 会去除除正文内容之外的所有内容，因此#dashboard位于顶层，因此find实际上会搜索#dashboard. 由于#dashboard它位于顶层，您可以使用过滤器从其他顶层节点中选择它。

http://jsfiddle.net/mowglisanu/SqL9Q/

于 2013-02-03T23:28:22.037 回答