如何使用jQuery选择变量中的元素？

Question

我正在尝试为我在CMS中使用的TinyMCE制作一个简单的图像浏览器。作为其中的一部分，我需要检测用户是否选择了现有图像，因此我可以显示“编辑”表单而不是“选择图像表单”。

var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);

第一个函数将编辑器窗口中的用户选定文本作为HTML字符串返回。然后我想使用jQuery（虽然普通的javascript也可以），以便在随后抓取src和title属性进行编辑之前检查此字符串是否包含img标记。

现在我已经把html变成了一个对象。但在此之后我无法设法搜索img元素。读完这篇文章（How to manipulate HTML within a jQuery variable?后），我试过了：

$elem.find('img');

但它只是作为一个“未定义”的对象......

我想我错过了一些相当明显的东西（现在已经很晚了），但一小时后我仍然无法弄清楚如何从选择中获取img标签。 ：（

非常感谢提前。

Answer 1

由于<img>位于jQuery对象的根目录，因此您需要使用.filter()而不是.find()。

$elem.filter('img');

.filter()方法查看jQuery对象顶层的元素，而.find()查找任何顶级元素中的嵌套元素

如果您事先不确定目标元素的位置，可以将HTML放入包装<div>进行搜索。这样，给出的HTML永远不会出现在顶部。

var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);

var $img = $elem.find('img');

Answer 2

尝试查看$elem变量中的内容。只需使用 Firefox 和Firebug进行console.log($elem)即可，您应该可以管理得很好！ ;）