如何使用普通 javascript 包裝每個第 n 個 div

Question

我已經用 jQuery 實現了這一點，但我正在尋找一個簡單的 JavaScript 的解決方案。 我有一個這樣的 div 結構 -

<div class="parent">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>
<div class="parent">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

... and so on

現在，我想將每個第 n 個 div 包裝在每個.parent div 中。 像這樣 -

<div class="parent">
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
    <div class="wrapper">
        <div>content</div>
        <div>content</div>
    </div>
</div>

... and so on

任何幫助將不勝感激。 我已經嘗試過這樣的事情並且沒有進一步的線索 -

// forEach function
var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]); // passes back stuff we need
    }
}

// select all .parent divs
var parentDivs = document.querySelectorAll('.parent');

//slicing the array
var chunk = function ( array, size ) {
  var arr = [];
  for ( var i = 0; i < array.length; i += size ) {
      var newSlicedArray = Array.prototype.slice.call( array, i, i + size );
      Array.prototype.push.apply(arr, newSlicedArray);
  }
  return arr;
}

//run foreach function
forEach(parentDivs, function (index, value) {

  var childrens = value.querySelectorAll("div");

  var final = chunk(childrens,1);
  console.log(final);

});

Answer 1

您的原型調用對於推送來說是不必要的。 它是一個原生數組，而不是一個 DOM 元素。 Added code to map the arrays to arrays of DOM elements, accumulate and append them to a new DOM elements and remove from parent using reduce, and then append back to the original element.

 // forEach function var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); // passes back stuff we need } } // select all.parent divs var parentDivs = document.querySelectorAll('.parent'); //slicing the array var chunk = function ( array, size ) { var arr = []; for ( var i = 0; i < array.length; i += size ) { var newSlicedArray = Array.prototype.slice.call( array, i, i + size ); arr.push(newSlicedArray); } return arr; } //run foreach function forEach(parentDivs, function (index, value) { var childrens = value.querySelectorAll("div"); var final = chunk(childrens,3); final.map( towrap => towrap.reduce( (acc, el) => (acc.appendChild(el),acc), document.createElement('div') ) ).forEach( el => { el.className ="wrap"; value.appendChild(el) }) });

 .wrap { border: 1px solid green }

 <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div> <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div>

Answer 2

使用以下方法，我們使用“父”class 使用 querySelectorAll 計算每個元素。

然后我們使用循環來修改元素的每個實例。

1. 獲取父 class 內部的當前內容
2. 刪除當前內容
3. 創建你的包裝器，並用我們存儲的內容填充它
4. 最后，將包裝器添加到您的父級中。

 window.onload = function() { // Run after the page has loaded let p = document.querySelectorAll('.parent'); for (let i = 0; i < p.length; i++) { if (i % 2) { // select every second instance let content = p[i].innerHTML; // store the content p[i].innerHTML = ''; // remove content from inside.parent let c = document.createElement('div'); // Create the wrapper c.className = 'wrapper'; c.innerHTML = content; // Put the content inside of the wrapper p[i].appendChild(c); // Add wrapper inside of the.parent } } }

 .wrapper { border: solid 1px blue }

 <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div> <div class="parent"> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> <div>content</div> </div>