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

示例小提琴

或者，您可以将 HTML 包装在 a 中div并保持 jQuery 原样。

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