JavaScript 返回 [object Object]

Question

我正在尝试让这个运行起来

$('#info').replaceWith('<div id="infobox" class="reveal-modal">'+$('#info').contents()+'<a class="close-reveal-modal">&#215;</a></div>');

但是它只给了我[object Object]。当我把它替换为$('#info').contents()时，事情就正常运行了。

- zimt28

---

好的，$('#info').contents() 是一个对象，对象的默认字符串表示形式是 [object Object]。你不能仅仅将任意对象与字符串连接起来。 - Felix Kling

Answer 1

尝试：

$(function(){
    var content = $('#info').get(0).outerHTML;
    $('#info').replaceWith('<div id="infobox" class="reveal-modal">'+content+'<a class="close-reveal-modal">&#215;</a></div>');
})

$('#info').get(0).outerHTML返回的是<div id="info">anything</div>。但如果只想要内容，请使用$('#info').html()，它将返回anything。

- Shankar Cabus

Answer 2

如果您想要保留现有的内容并将其放置在外部 div 中，请尝试使用 wrap()，然后可以调用 after() 来添加关闭锚点。

$('#info').wrap('<div id="infobox" class="reveal-modal">')
    .after('<a class="close-reveal-modal">&#215;</a>')

工作示例：http://jsfiddle.net/hunter/qU4s3/

---

也可以这样写：

$('#info')
    .wrap($('<div>', { id: "infobox", "class": "reveal-modal"}))
    .after($('<a>', { "class": "close-reveal-modal", html: "&#215;" }));

工作示例：http://jsfiddle.net/hunter/qU4s3/2/

- hunter

---

不过，.append 应该改为 .after，并且 wrap 应该包含它。 - Fabrício Matté

你的更新版本看起来更好，对我来说很有意义，测试通过。 - Fabrício Matté

目前为止最佳答案，因为它不必不必要地解析HTML。 - Fabrício Matté

Answer 3

.contents() 会返回一个jQuery对象，您需要使用.text() 或 .html()，具体取决于#info中是否包含其他元素。

$('#info').replaceWith('<div id="infobox" class="reveal-modal">'+$('#info').text()+'<a class="close-reveal-modal">&#215;</a></div>');

- Musa

Answer 4

以 $('#info').contents(). 开头 <-- 就像这样

- Ankush Jain

---

请解释一下这是如何解决问题的？尾随点是用来做什么的？如果你只是将它插入到 OP 的代码中，你会得到一个语法错误。 - Felix Kling