为何jQuery Ajax响应中find()方法无法匹配ul li选择器？

问题场景 #

通过Ajax请求获取完整HTML页面内容后，尝试用$(data).find('ul li')提取列表项时返回0个元素，但直接使用li/li a，或者用$(data).filter('ul').find('li a')却能正常工作。而直接操作document时，$(document).find('ul li')可以正常运行。

核心原因 #

jQuery处理完整HTML文档时，会自动过滤掉<html>、<head>、<body>这些顶级容器元素，只把<body>的直接子元素（比如示例里的<h1>、<hr>、<ul>）作为$(data)对应的顶层元素集合。

• find('ul li')的逻辑是：在当前元素集合的后代元素中查找ul，再在这些ul内部找li。但示例里的<ul>本身就是$(data)的顶层元素之一，不属于任何其他元素的后代，所以find('ul')找不到匹配项，自然ul li也没有结果。
• 而直接用find('li')时，jQuery会遍历所有顶层元素的后代，<ul>作为顶层元素，它内部的li会被匹配到；用filter('ul')则是先从顶层元素里筛选出<ul>，再查找它的后代li，这两种方式都能绕过顶层元素的限制。

可行的解决方法 #

方法1：先筛选ul再找li #

$.ajax('data/archive/').done(function(data) {
    const sel = $('<select>').attr({id: 'archive', title: 'date/times as stored on the server'}).addClass('dt-button')
    $(data).filter('ul').find('li').each(function(k,v){
        const txt = $(v).text()
        if (txt.match(/.*\.json/)){
            sel.prepend($('<option>').attr({value: `archive/${txt}`}).text(txt.replace('.json', '')))
        }
    })
    sel.prepend($('<option>').attr({value: 'latest.json', selected:'selected'}).text('latest'))
    $('#data-archive').append(sel)
})

方法2：直接查找li元素 #

$.ajax('data/archive/').done(function(data) {
    const sel = $('<select>').attr({id: 'archive', title: 'date/times as stored on the server'}).addClass('dt-button')
    $(data).find('li').each(function(k,v){
        const txt = $(v).text()
        if (txt.match(/.*\.json/)){
            sel.prepend($('<option>').attr({value: `archive/${txt}`}).text(txt.replace('.json', '')))
        }
    })
    sel.prepend($('<option>').attr({value: 'latest.json', selected:'selected'}).text('latest'))
    $('#data-archive').append(sel)
})

方法3：用临时容器包裹HTML #

把返回的HTML放到一个<div>容器中，这样就能用正常的层级选择器：

$.ajax('data/archive/').done(function(data) {
    const sel = $('<select>').attr({id: 'archive', title: 'date/times as stored on the server'}).addClass('dt-button')
    $('<div>').html(data).find('ul li').each(function(k,v){
        const txt = $(v).text()
        if (txt.match(/.*\.json/)){
            sel.prepend($('&lt;option&gt;').attr({value: `archive/${txt}`}).text(txt.replace('.json', '')))
        }
    })
    sel.prepend($('&lt;option&gt;').attr({value: 'latest.json', selected:'selected'}).text('latest'))
    $('#data-archive').append(sel)
})

内容的提问来源于stack exchange，提问作者murison