使用 Find 查找 HTML 片段的 Ajax 响应

2022-01-20 00:00:00 find filter jquery dom javascript

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

<!DOCTYPE html><html><身体><div id="仪表板"><div id="dash2"><h1>嗨</h1></div></div></身体></html>

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

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

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

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

<!DOCTYPE html><html><身体><div id="div1"><div id="仪表板"><div id="dash2"><h1>嗨</h1></div></div></div></身体></html>

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

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

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

解决方案

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

执行时找不到#dashboard的原因

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

很可能是因为#dashboard在清理后已经成为根元素，而.find()匹配的不是根本身的后代元素..find()p>

为了避免这个问题，我通常在一个空的 <div> 上执行此操作.

$("<div/>").html(response).find('#dashboard')

I was doing some test with JQuery find , I have an html response coming from an AJAX request, so initially the result would be this.

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

In My Ajax Success code is this..

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

Upon printing it on the console that gives me an undefined.

However when I modify the response page(I created a nesting div) to this

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

The line from my Ajax Success code returned console.log( $(response).find('#dashboard').html() ); returned the

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

My Question, How come on the first HTML when doing the console.log( $(response).find('#dashboard').html() ); it gave me an undefined, however on the second HTML(the one nested in the div) gave me the the contents of #dashboard(which the one I am expecting to get.

解决方案

As far as I know it is a browser dependent behavior to which tags to drop as a measure of sanitation, e.g. <head/>.

The reason for not finding #dashboard while executing

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

is most probably because #dashboard has become the root element after the sanitation, and .find() matches against the descendant elements not on the root itself.

I normally to avoid this problem do this over an empty <div>.

$("<div/>").html(response).find('#dashboard')

相关文章