javascript - 根据窗口宽度动态更改div位置

Question

这是一个复杂的问题，但也是一个好主意。以下代码我用于将子类别显示为父类别并且正在运行:

$(function(){
  
  $(".common-parrent-class").on("click",function(){
    $child = $(this).attr('class').split(" ")[0].split("-")[0]+"-child";
    
    var status = $('.'+$child).css('display');
     $('.'+$child).toggle();
      if(status == 'none'){
          
         
           if($(this).attr('class').split(" ")[0]==='class5-parrent'){
               
               $('.'+$child).appendTo('.after-5');
               $(".after-class").css("display","none");
               $(".after-5").css("display","flex");
           }
      	
            
          else{
               $('.'+$child).appendTo('.after-4');
               $(".after-class").css("display","none");
               $(".after-4").css("display","flex");
               
            }
            
            
       
       $(".common-child-class").css("display","none");
       $('.'+$child).css("display","block");
       }
        if(status == 'block'){
            $(".after-class").css("display","none");
        }
  });
  
  
  $(window).resize(function() {

              var windowSize = $(window).width(); 
          


});
   
  });

.after-1, .after-2, .after-3, .after-4, .after-5{
      border: 1px solid black;
      display:none;
      width:100%;
  }
  
  
  .common-parrent-class{
      border:1px solid black;
      margin:2px;
      float:left;
      width:20%;
      cursor:pointer;
      
  }
  
  .main, .sub-category{
      display: inline-table;
      padding:22px;
      border:1px solid black;
  }
  
  .sub-category{
      margin-top:10%;
      display:none;
      width:100%;
  }
  
  .common-child-class{
      display:none;
      width:100%;
  }
  
  .inner{
      float:left;
      width:24%;
      margin:2px;
  }
  @media screen and (max-width: 299px) and (min-width:200px)
        {
            
            .common-parrent-class, .inner{
                
                width:60%;
            }  
            
            
        }
  
        
          @media screen and (max-width: 420px) and (min-width:300px)
        {
            
            .common-parrent-class, .inner{
                
                width:40%;
            }  
            
            
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col-sm-6 main">
     
     <div class="main-category"> 
       <div class="class1-parrent common-parrent-class">Class1</div>
       <div class="after-1 after-class"></div>
       <div class="class2-parrent common-parrent-class">Class2</div>
       <div class="after-2 after-class"></div>
       <div class="class3-parrent common-parrent-class">Class3</div>
       <div class="after-3 after-class"></div>
       <div class="class4-parrent common-parrent-class">Class4</div>
       <div class="after-4 after-class"></div>
       <div class="class5-parrent common-parrent-class">Class5</div>
       <div class="after-5 after-class"></div>
       
    </div>
      
      <div class="sub-category">
          
          <div class="class1-child common-child-class">
            <div class="class1-child-inner inner">Class 1</div>
            <div class="class1-child-inner inner">Class 1</div>
            <div class="class1-child-inner inner">Class 1</div>
            <div class="class1-child-inner inner">Class 1</div>
         </div>
     
          <div class="class2-child common-child-class">
            <div class="class2-child-inner inner">Class 2</div>
            <div class="class2-child-inner inner">Class 2</div>
            <div class="class2-child-inner inner">Class 2</div>
            <div class="class2-child-inner inner">Class 2</div>
         </div>
 
          <div class="class3-child common-child-class">
            <div class="class3-child-inner inner">Class 3</div>
            <div class="class3-child-inner inner">Class 3</div>
            <div class="class3-child-inner inner">Class 3</div>
            <div class="class3-child-inner inner">Class 3</div>
         </div>
     
          <div class="class4-child common-child-class">
            <div class="class4-child-inner inner">Class 4</div>
            <div class="class4-child-inner inner">Class 4</div>
            <div class="class4-child-inner inner">Class 4</div>
            <div class="class4-child-inner inner">Class 4</div>
         </div>

          <div class="class5-child common-child-class">
            <div class="class5-child-inner inner">Class 5</div>
            <div class="class5-child-inner inner">Class 5</div>
            <div class="class5-child-inner inner">Class 5</div>
            <div class="class5-child-inner inner">Class 5</div>
         </div>

          

          
      </div>
      
      
      
      

</div>
  </div>
</div>   

但我需要的是，当用户点击任何父类时在它的父类的原始之后显示子类。

1) 当窗口宽度为 1000px 时，父级的第一行是 Class1,Class2,Class3,Class4 。

点击Class1到Class4然后它的子div需要在“after-4”类中显示

if click on Class5 then child div need to show in "after-5" class

2) 当窗口宽度为360px时第一行父级为Class1,Class2

click on Class1 & Class2  then it's child div is need to show in "after-2" class 

  if click on Class3 then child div need to show in "after-4" class

3) 当窗口宽度为254px时，第一行父级为Class1

click on Class1 then it's child div is need to show in "after-1" class 


So how can I do this ? Also when the window is resized child div need to come automatically in corresponding after class. 

请参阅 jsfiddle https://jsfiddle.net/felixtm/qxbzpvr1/3/

Answer 1

更新

更新了 JSFiddle 以符合要求

---

您好@Felix，您正在寻找的答案与给定的链接非常相​​似

这是示例 jsFiddle https://jsfiddle.net/df9nykhL/对于问题

通过给定的方法可以得到第一行显示的div个数，然后根据需要使用

function countFirstRowItems(parentSelector, childSelector){
    var count = 0, theTop = undefined;
    $(parentSelector + " > " + childSelector).each(function(){
        var thisTop = $(this).offset().top;
        if(theTop === undefined){
            theTop = thisTop;
        }
        if(thisTop != theTop){
            return false;
        }
        count++;
    });
    return count;
}
var itemsDisplayedInFirstRow = countFirstRowItems(".main-category",".common-parrent-class");

How to count the number of elements on the first row of their parent element