jQuery中拼接对象与选择器报错，求错误原因

你的错误核心在于把jQuery对象直接和字符串选择器拼接了，让我一步步给你拆解：

你第一行代码 var Box = $(window.parent.document).find("#box"); 得到的是一个jQuery对象，不是字符串形式的选择器。当你执行 Box+".bg > .content" 时，JavaScript会自动把jQuery对象转换成默认的字符串表示——也就是 [object Object]，最终生成的无效选择器 [object Object].bg > .content 就触发了语法错误。

正确的两种写法： #

方法1：用jQuery的.find()链式调用（最推荐）

既然Box已经是一个jQuery对象，直接在它上面调用.find()就能查找内部的目标元素，完全不需要字符串拼接：

var Box = $(window.parent.document).find("#box");
var BoxContent = Box.find(".bg > .content").text();
console.log(BoxContent);

方法2：转换为DOM元素后再操作（不推荐，仅作补充）

如果一定要用拼接思路，需要先把jQuery对象转换成对应的DOM元素（取数组下标[0]即可），再基于它构建新的选择器：

var Box = $(window.parent.document).find("#box");
var BoxContent = $(Box[0]).find(".bg > .content").text();
console.log(BoxContent);

为什么更推荐方法1？ #

• 完全贴合jQuery的链式调用设计，代码简洁易读
• 不需要额外的类型转换，性能更优
• 从根源上避免了字符串拼接可能带来的语法风险

内容的提问来源于stack exchange，提问作者Pepe