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()我得到你好!当我在div中提取页面内容并提醒时,$(page).html()我会得到整个html内容.

我想在这里完成的是我有一个带有html模板的页面字符串,我正在尝试在其中找到一个类username,我得到了null.

我很困惑这种情况发生了

这是一个小问题

Answer 1

当你调用时$(page),构造一个包含4个元素的jQuery对象; 对于未嵌套在字符串中的每个HTMLElements.

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

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

html()返回innerHTML所述的第一本jQuery对象元件; 这就是你只看到"你好!"的原因.

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

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

在这里看到你的更新小提琴; http://jsfiddle.net/6TSuq/15/

请记住,将来你可能会嵌套这样的元素;

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

在这种情况下,filter()因为.username没有结果; 因为jQuery对象$(page)不包含该.username元素; 它包含一个h1,后代是一个.username.因此,你需要使用;

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