Как проанализировать [объект HTMLDivElement]?

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.

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());

<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>