在 2 個匹配元素的內容周圍添加一個 Div

Question

我正在嘗試在 2 個 div 周圍添加一個類名為“包裹”的 div，其內部 HTML 為“一個”和“兩個”

<div class='blk'>one</div>
<div class='blk'>two</div>

在這里，我嘗試使用第一個和第二個“clearfix”類元素，並將其用作選擇器，用 div 將它們之間的內容包裝起來。 我從下面的代碼中了解到 wrapAll 將只包裝匹配的元素。 我想弄清楚 jquery 中的哪些功能將幫助我用父 div 包裝一和二。

 var arr = $('.clearfix'); $(arr[0], arr[1]).wrapAll('<div class="wrapped"/>');

 .wrapped { background-color: 'red'; } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> <div class='clearfix'></div> </div>

我的預期輸出是：

<div>
  <div class='clearfix'></div>
  <div class='wrapped'>
    <div class='blk'>one</div>
    <div class='blk'>two</div> 
  </div>
  <div class='clearfix'></div>
  <div class='blk'>3</div>
  <div class='blk'>4</div>
  <div class='clearfix'></div>
</div>

Answer 1

如果我正確理解了這個問題，那么您想要在包含文本內容的兩個元素（使用類blk ）周圍包裹一個 div（使用類wrapped ）； “一”與“二”。

實現這一點的一種方法是通過:eq選擇器 - 這允許您隔離.blk類選擇器（即第一個和第二個）的特定元素，而不是僅對這些元素應用換行：

 /* Select the first and second elements that match the .blk selector and apply wrapped div to those only */ $('.blk:eq(0), .blk:eq(1)').wrapAll('<div class="wrapped"/>');

 .wrapped{ background-color: red; /* Fixed syntax error here too :) */ } .hidden{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> <div class='clearfix'></div> </div>

Answer 2

您可以嘗試使用.filter()

 var arr = $('.blk'); arr.filter((i, el) => i < 2).wrapAll(`<div class="wrapped"></div>`);

 .wrapped{ background-color: red; } .hidden{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> </div>

Answer 3

 var clearfixParent = $('.clearfix').parent(); var wrappedEle = 0; $(clearfixParent).find( 'div' ).each(function(){ if( $(this).hasClass( 'clearfix' ) ) { wrappedEle += 1; $(this).after('<div class="wrapped"/>'); } else { $(this).appendTo( '.wrapped:eq(' + ( wrappedEle - 1 ) + ')' ); } });

 .wrapped { background-color: 'red'; } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> <div class='clearfix'></div> </div>

Answer 4

為此，您不需要 jQuery，您可以使用 DOM API。

 const appendSelectedSiblings = selector => target => { while (target.nextElementSibling && target.nextElementSibling.matches(selector)) target.appendChild(target.nextElementSibling) } document.querySelectorAll('.clearfix').forEach(appendSelectedSiblings('.blk'))

 .clearfix > .blk { background: green };

 <div id="root"> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> <div class='clearfix'></div> </div>

Answer 5

根據我對您包含的標記的理解，您希望將所有 div 與 BLK 類並排放置。

我制作了一個代碼片段，可以動態執行此操作，而無需指定全部包裝的索引。

如果您可以使代碼更有效，請隨時更新。

 var divs = $(".scan").find("div"); var toEnclose = []; var continueEnclose; var latestArray = []; divs.each(function(i) { if ($(this).hasClass("clearfix")) { if (latestArray.length != 0) { toEnclose.push(latestArray); latestArray = []; } } if ($(this).hasClass("blk")) { latestArray.push(i); } }); if (latestArray.length != 0) { toEnclose.push(latestArray); latestArray = []; } var enclose; var mix = []; $.each(toEnclose, function(i, k) { $.each($(this), function(i2, k2) { if (i != 0) { k2 += i; } mix.push(".scan div:eq(" + k2 + ")"); }); enclose = mix.join(","); // console.log(enclose); $(enclose).wrapAll($("<div class='wrapped'></div>")); mix = []; });

 .wrapped { background-color: red; margin-bottom: 5px; } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="scan"> <div class='clearfix'></div> <div class='blk'>one</div> <div class='blk'>two</div> <div class='clearfix'></div> <div class='blk'>3</div> <div class='blk'>4</div> <div class='clearfix'></div> <div class='blk'>5</div> <div class='blk'>6</div> <div class='blk'>7</div> </div>