我有一个 TypeScript 方法，旨在从传入的加载 Ajax 的 HTML 字符串中提取特定的部分 View 元素(如果它是完整 View )。
即使字符串包含带有 class="body-content" 的元素，下面的行返回 0 长度:
$(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>© 2014 - My ASP.NET Application</p>
</footer>
</body>
</html>
跟进:http://jsfiddle.net/TrueBlueAussie/7AvmW/2/
根据 Jack 的回答，我把上面的 JSFiddle 放在一起看看发生了什么。
结果:
基本上 $(html) 在包含无效子元素 的字符串上，例如 HTML HEAD和 BODY，这些元素由 jQuery 解包。我发现的效果当然是扁平化 BODY 的第一层 仅返回成为根元素.
解决方案:
最简单的解决方案是始终使用虚拟父元素创建页面元素以进行搜索。
例如
$html =$('<div>').html(html);
那么任何典型的搜索都将起作用:
$html.find('.selector');
最佳答案
当您使用 jQuery(html) 时它创建了一个临时的 <div>然后设置它的 .innerHTML给定 HTML 内容的属性。之后，它遍历 .childNodes。构建 jQuery 集的属性。
文档还指出:
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided ... During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
在 Chrome(也可能是其他浏览器)上，当以这种方式加载整个页面时，.firstChild临时属性(property)<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() :
var $items = $(html).filter('.body-content');
关于javascript - 如何使用 jQuery find 从整页 HTML 字符串中提取内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24406973/