Question

我有一个TypeScript方法，用于从传入的加载Ajax的HTML字符串中提取特定的局部视图元素（如果它是完整视图）。

下面的行返回0长度，即使该字符串包含class="body-content"的元素：

$(html).find('.body-content')

功能：

    // Extract a panel from a HTML string
    // Allow for multiple child elements
    private _extractPanel(html: string): JQuery
    {
        var $panel: JQuery;

        // Test for full vs. partial view in html
        if (/<html>/i.test(html))
        {
            // Full view: Match the content selector and extract its children
            $panel = $(html).find('.body-content').first().children();
            // *** THE LINE ABOVE GIVES ZERO MATCHES! ***
        }
        else
        {
            // Partial view: Simply return the entire partial view
            $panel = $(html);
        }
        return $panel;
    }

是因为根是HTML元素还是我遗漏的其他内容？ $(html)返回长度为63的对象，但find不返回任何匹配项。

这是调试器中html参数值的示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Index - My ASP.NET Application</title>
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <link href="/Content/site.css" rel="stylesheet" />
        <script src="/Scripts/modernizr-2.7.2.js"></script>
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button> <a class="navbar-brand" href="/">jQuery Tardis</a>

                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a>
                        </li>
                        <li><a href="/Home/About">About</a>
                        </li>
                        <li><a href="/Home/Contact">Contact</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Account/Register" id="registerLink">Register</a>
                        </li>
                        <li><a href="/Account/Login" id="loginLink">Log in</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <div id="testpanel" class="row">
                <div class="AddinListView"> <a href="/">Home</a>

                     <h2>Tardis transition examples</h2>

                    <ul>
                        <li><a href="/Transition/Transition/1?transition=none" target="_self">No transition (hide/show)</a>
                        </li>
                        <li><a href="/Transition/Transition/1?transition=slide" target="_self">Slide out/in</a>
                        </li>
                        <li><a href="/Transition/Transition/1?transition=fade" target="_self">Fade out/in transtions</a>
                        </li>
                    </ul>
                </div>
            </div>
            <hr />
        </div>
        <footer>
            <p>&copy; 2014 - My ASP.NET Application</p>
        </footer>
    </body>

</html>

跟进：http://jsfiddle.net/TrueBlueAussie/7AvmW/2/

根据Jack的回答，我把上面的JSFiddle放在一起，看看发生了什么。

结果：

基本上$(html)在包含无效子元素的字符串上，例如HTML HEAD和BODY，这些元素将被解包jQuery。我发现的效果当然是第一级BODY 的扁平化只能成为根元素。

解决方案：

最简单的解决方案是始终使用虚拟父元素创建页面元素以进行搜索。

e.g。

$html =$('<div>').html(html);

然后任何典型的搜索都会起作用：

$html.find('.selector');

Answer 1

使用jQuery(html)时，它会创建一个临时<div>，然后将其.innerHTML属性设置为给定的HTML内容。然后，它迭代.childNodes属性以构建jQuery集。

文档还说明：

传递复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源的DOM ...在此过程中，某些浏览器会过滤掉某些元素，例如<html>，<title>，或<head>元素。因此，插入的元素可能无法代表传递的原始字符串。

在Chrome（也可能是其他浏览器）上，当以这种方式加载整个页面时，临时.firstChild的{{1}}属性是<div>的第一个子元素：

<body>

解决方案

要可靠地使用var d = document.createElement('div'); d.innerHTML = '<html><body><span>hi</span></body></html>'; console.log(d.firstChild); // <span>hi</span>，您可以将页面加载到临时元素中，如下所示：

.find()

如果您事先已经知道了网页结构，那么您也可以使用var $root = $('<div>', {html: html}); var $items = $root.find('.body-content');：

.filter()

如何使用jQuery find从整页HTML字符串中提取内容

跟进：http://jsfiddle.net/TrueBlueAussie/7AvmW/2/

结果：

解决方案：

1 个答案:

解决方案