Question

我遇到了将对象注入DOM的问题。我必须抓住一个div把它放在一个数组然后注入DOM。但是当我注入DOM时，我显示[object HTMLDivElement]而不是div。我错过了什么代码在jsfiddle设置。 http://jsfiddle.net/rexonms/zdzdnuo7/

提前致谢

HTML

    <!-- Section A -->
    <div id="stories">
        <ul class="slider"></ul>
    </div>

    <!-- Section B -->
    <div id="x">
        <div class="story">A</div>
        <div class="story">B</div>
        <div class="story">C</div>
        <div class="story">D</div>
        <div class="story">E</div>

    </div>

JAVASCRIPT

    var items = $('.story');   
    var itemsPerSlide = 2;
    var parent = [];
    var children = [];

    // Divide the items in chunks
    for(var i=0; i<items.length; i++){
        if(i<itemsPerSlide){
            children.push(items[i]);
        }

        else{

            itemsPerSlide = itemsPerSlide + i;

            childrenToParent(children, parent);
            children = [];
            children.push(items[i]);
        }
    }

    childrenToParent(children, parent);
    $('.slider').append(parent);



    function childrenToParent(children, parent){
        parent.push("<li>" + extractEls(children) + "</li>");
    }


    function extractEls(children){
        var toReturn = '';
        for(var i = 0; i<children.length; i++){
            toReturn += children[i];
        }
        return toReturn;
    }

Answer 1

如果要使原始容器保持原样，只需克隆要复制其节点的容器并从复制的节点中获取节点。

然后你将它们放入阵列然后多次运行循环而不是你可以运行一次循环而同时将它们放在 .slider 中类。

工作/更新： JS Fiddle Link

<强> JS Part:

var storyCopy = $("#x").clone();
var items = storyCopy.find(".story"); 
var itemsPerSlide = 2;
var counter = 0;
var LIElement = document.createElement("li");

for(var i=0; i<items.length; i++) {
    LIElement.appendChild(items[i]);
    counter++;
    if(counter >= itemsPerSlide) {
        $('.slider').append(LIElement);
        LIElement = document.createElement("li");
        counter = 0;
    }
}
$('.slider').append(LIElement);

Answer 2

我相信这一行是你的问题：

toReturn += children[i];

这应该是代替它：

toReturn += $(children[i]);

Answer 3

向儿童添加outerHTML

  function extractEls(children){
    var toReturn = '';
    for(var i = 0; i<children.length; i++){
         toReturn += children[i].outerHTML; //changed
    }
    return toReturn;
}

DEMO

Answer 4

您需要在最终代码中添加.html()。我已使用此link

更新了您的编码

Answer 5

您遇到的问题是您将DOM节点视为字符串。向字符串添加元素会导致调用.toString（）并获得您看到的输出。

如果您只是想将它们分组并将它们放入lis中，那么使用slice和wrapAll可以很容易地完成它们。

＆＃13;

var storyHolder = $("#x").clone();
var stories = storyHolder.find(".story");
var itemsPerSlide = 2;

for (var i = 0; i < stories.length; i += itemsPerSlide ) {
    var li = $("<li/>");
    stories.slice(i, i + itemsPerSlide ).wrapAll(li);
}

$(".slider").append(storyHolder.children());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Section A -->
    <div id="stories">
        <ul class="slider"></ul>
    </div>

    <!-- Section B -->
    <div id="x">
        <div class="story">A</div>
        <div class="story">B</div>
        <div class="story">C</div>
        <div class="story">D</div>
        <div class="story">E</div>

    </div>

＆＃13;

如何解析[object HTMLDivElement]？

5 个答案: