选择器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始终为空。

谁能告诉我为什么会这样？

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');

Answer 2

问题ID是因为a是包含元素，因此jQuery正在尝试在第一个a内找到a元素，并且显然不返回任何内容。

相反，您可以像这样使用filter()：

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

Example fiddle

或者你可以将你的HTML包装在div中并保持jQuery不变。

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