如何將很多兄弟姐妹放入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> 

Answer 2

可能不需要隱藏所有同級div，而只隱藏父div。

 $( document ).ready(function() { $('select').on('change', function() { $("#parent1").hide(); $("#parent2").hide(); $('#sel').val() == 1 ? $("#parent1").show() : $("#parent2").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="sel"> <option value ="0">-----SELECT------</option> <option value ="1">Show Parent 1</option> <option value ="2">Show Parent 2</option> </select> <div id="parent1" class="glob" style="display:none"> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> </div> <div id="parent2" class="glob" style="display:none"> <div>div5</div> <div>div6</div> </div>