javascript - 如何把很多 sibling 放到一个div中

Question

我有六个这样的 div:

<div style="display:none">div1</div>
<div style="display:none">div2</div>
<div style="display:none">div3</div>
<div style="display:none">div4</div>
<div style="display:none">div5</div>
<div style="display:none">div6</div>

我想将前 4 个 div 放入一个隐藏的 div，然后将接下来的 2 个 div 放入另一个隐藏的 div，从而产生这样的 DOM:

<div class="glob" style="display:none">
    <div style="display:none">div1</div>
    <div style="display:none">div2</div>
    <div style="display:none">div3</div>
    <div style="display:none">div4</div>
</div>

<div class="glob" style="display:none">
    <div style="display:none">div5</div>
    <div style="display:none">div6</div>
</div>

完成此操作后，我想添加一个具有 2 个值的组合，当您单击第一个选项时，它会显示第一个“全局”div，而当您单击第二个选项时，它会显示第二个“全局”div .我不知道如何做第一件事。

Answer 1

这应该可以解决问题。

关键是使用.slice()

var divs = $("div");
var count = 0;
for (var i = 0; i < divs.length; i += 4) {
  divs.slice(i, i + 4).css("display", "block").wrapAll("<div class=\"glob\" style=\"display:none\">");
  $('select[name="show"]').append("<option value=\"" + count + "\">glob " + (count + 1) + "</option>")
  count++;
}
$('select[name="show"]').change(function() {
  $('.glob').hide().eq($(this).find("option:selected").val()).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none">div1</div>
<div style="display:none">div2</div>
<div style="display:none">div3</div>
<div style="display:none">div4</div>
<div style="display:none">div5</div>
<div style="display:none">div6</div>

<select name="show">
<option>select what glob you want to see</option
</select>