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

Question

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

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

第一个函数将用户从编辑器窗口中选择的文本作为 HTML 字符串返回。然后我想使用 jQuery(尽管普通的 javascript 也可以)来检查这个字符串是否包含 img 标签，然后再获取 src 和 title 属性进行编辑。

现在我已经将 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');