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>

如何将很多兄弟姐妹放入div中

2 个答案: