在 2 个匹配元素的内容周围添加一个 Div

Question

我正在尝试在 2 个 div 周围添加一个类名“包裹”的 div，其中包含 innerHTML 的“一”和“二”

<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 括起来/分组。

我制作了一个可以动态执行此操作的 sn-p，而无需指定 wrap all 的索引。

如果您可以使代码更高效，请随时更新。

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>