连接数组会导致它们作为对象连接

Question

我有一个带有参数items的回调，其中包含一个数组：

[<article>..</article>,<article>...</article>,<article>..</article>]

我需要做的就是加入这些项目，所以我做的是：

items = items.join('');

但是当我console.log(items)时，我看到了：

[object HTMLElement][object HTMLElement][object HTMLElement][object HTMLElement] 

如何正确合并此数组？

Answer 1

您拥有的对象无法使用join()自动序列化为HTML。

如果您的浏览器支持outerHTML，则可以执行...

var html = $.map(items, function(item) { return item.outerHTML; }).join("");

jsFiddle

否则，你可以......

var fauxDocFrag = $("<div />");
$.each(items, function(key, item) { fauxDocFrag.append(item); });
var html = fauxDocFrag.html();

jsFiddle

Answer 2

在这里，我为上述问题做了完整的垃圾箱。你可以通过演示链接。

演示 http://codebins.com/bin/4ldqp7n 的 HTML

<input type="button" id="btn1" value="Get Object Array Text" />
<input type="button" id="btn2" value="Reset" />
<div id="result">
</div>

<强>的jQuery

$(function() {
    var items = ["<article>Article-1:Text</article>", "<article>Article-2:Text</article>", "<article>Article-3:Text</article>", "<article>Article-4:Text</article>", "<article>Article-5:Text</article>"];

    $("#btn1").click(function() {
        var result = "";
        $.each(items, function(key, item) {
            if ($(item).text().trim() != "") {
                if (key > 0) result += " ";
                result += $(item).text().trim();
            }
        });
        if (result != "") {
            $("#result").html(result);
            $("#result").show('slow');
        }
    });

    //Reset Result
    $("#btn2").click(function() {
        $("#result").html('').css('display', 'none');
    });
});

演示 http://codebins.com/bin/4ldqp7n