jQuery选择器存在奇怪问题

Question

我有一个变量包含下面这个字符串:

var html = '<a href="http://www.taxibooking.dch/wp-content/uploads/2012/12/4-3.jpg"><img src="http://www.taxibooking.dch/wp-content/uploads/2012/12/4-3-300x202.jpg" alt="" title="4 (3)" width="300" height="202" class="alignnone size-medium wp-image-7" /></a>';

然后我尝试使用以下两个操作：

full_url = jQuery('a', html).attr('href');
tiny_url = jQuery('img', html).attr('src');

虽然 tiny_url 可以正常工作并返回值 http://www.taxibooking.dch/wp-content/uploads/2012/12/4-3-300x202.jpg，但是 full_url 总是为空。

有人能告诉我为什么吗？

- KodeFor.Me

---

html是一个POJS变量，还是包含该HTML结构的jQuery对象？ - Rory McCrossan

什么是POJS？我已经在我的代码中添加了一个更新，也许那会有所帮助。 - KodeFor.Me

POJS = 简单的纯JavaScript - Rory McCrossan

Answer 1

那是因为a元素不在您传递的html内部，而是在第一层级。您可以这样做：

full_url = jQuery('a', '<div>'+html+'</div>').attr('href');

但更有效的方法是定义并重复使用一个 jQuery 对象：

var $div = $('<div>'+html+'</div>');
full_url = jQuery('a', $div).attr('href');
tiny_url = jQuery('img', $div).attr('src');

- Denys Séguret

---

那就是问题所在。非常感谢 :) 9分钟后我会点赞 ;) :) - KodeFor.Me

Answer 2

问题出在a是包含元素，所以jQuery试图在第一个a中找到一个a元素，显然返回为空。 取而代之，您可以像这样使用filter():

var full_url = jQuery(html).filter('a').attr('href');
var tiny_url = jQuery(html).find('img').attr('src');

示例

或者你可以将你的HTML代码包裹在一个div中，保持jQuery代码不变。

$html = jQuery('<div>' + html + '</div>');
full_url = jQuery('a', $html).attr('href');
tiny_url = jQuery('img', $html).attr('src');

- Rory McCrossan

---

wrap并不是你想象中的那样。请参见http://jsfiddle.net/XtgbR/。 - Denys Séguret