javascript - jQuery find() 问题

Question

我有以下代码

var page = '<h1>Hello!</h1><p>FOO</p><span class="username">this is ur name</span><p>sample text</p>';

当我提醒 $(page).html() 时，我收到 Hello!当我将页面内容包装在一个 div 中并提醒 $(page).html() 我得到了整个 html 内容。

我在这里想要完成的是我有一个带有 html 模板的页面字符串，我试图在其中找到一个类 username，但我得到的是 null。

我对这种情况感到困惑

这是一个小问题

http://jsfiddle.net/6TSuq/1/

Answer 1

当您调用 $(page) 时，您构造了一个包含 4 个元素的 jQuery 对象；对于未嵌套在您的字符串中的每个 HTMLElements。

console.log($(page).map(function () {
   return this.nodeName;  
}).toArray());

// ["H1", "P", "SPAN", "P"] 

html() 返回此 jQuery 对象中 first 元素的 innerHTML；这就是为什么您只会看到“Hello!”。

要找到 .username，您应该使用 filter() 方法，该方法在 jQuery 对象中搜索与给定选择器匹配的元素。

alert($(page).filter('.username').text()); // "this is ur name", kthx.

在此处查看您更新的 fiddle ； http://jsfiddle.net/6TSuq/15/

请记住，将来您可能会有这样的嵌套元素；

var page = "<h1><span class='username'>Foo</span></h1>";

在这种情况下，filter()ing for .username 将不会产生任何结果；因为 jQuery 对象 $(page) 不包含 .username 元素；它包含一个 h1，它有一个 .username 的后代。因此在这里你需要使用；

alert($(page).find('.username').text());

有关引用，请参阅 find() , filter()和 map()