每个容器中的div计数器分开

Question

帮助请完成代码。我需要分别计算每个容器中的.resp-containers的数量。然后，您可以在交换机中滚动此数字，并将相应的类分发给容器中的每个元素 https://codepen.io/anon/pen/VXpZjP

$(document).ready(function(){
    var getLength = $(".resp-container").length
    var item = $(".resp-container");
    switch (getLength) {
    case 1: item.addClass("full-resp");
    break;
    case 2: item.addClass("half-resp");
    break;
    case 3: item.addClass("third-resp");
    break;
    case 4: item.addClass("fourth-resp");
    break;
    default: item.addClass("fourth-resp"); 
}
});

HTML

<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>

</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
</div>

Answer 1

您可以使用.each()，请查看下面的代码段....

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".container").each(function(){
    var getLength = $(this).find('.resp-container').length;
    
    var item = $(this).find('.resp-container');
switch (getLength) {
  case 1: item.addClass("full-resp");
    break;
  case 2: item.addClass("half-resp");
    break;
  case 3: item.addClass("third-resp");
    break;
  case 4: item.addClass("fourth-resp");
    break;
  default: item.addClass("fourth-resp"); 
}
  })
  
 
});

＆＃13;

.container {
  width: 100%;
}
.resp-container {
  background: blue;
  height: 50px;
  margin: 10px;
  display: inline-block;
}

/* Респонсив классы */
.full-resp {
  width: 100%;
}
.half-resp {
  width: 50%;
}
.third-resp {
  width: 33%;
}
.fourth-resp {
  width: 25%;
}
@media screen and (max-width: 780px){
  .half-resp, .third-resp, .fourth-resp {
  width: 50%;
}
}
@media screen and (max-width: 661px){
  .half-resp, .third-resp, .fourth-resp {
  width: 100%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>

</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为此你可以使用CSS，比运行脚本更有效

Stack snippet

＆＃13;

＆＃13;

.resp-container:first-child:last-child {
  width: calc(100% - 15px);
}

.resp-container:first-child:nth-last-child(2),
.resp-container:first-child:nth-last-child(2) ~ .resp-container  {
  width: calc(50% - 15px);
}

.resp-container:first-child:nth-last-child(3),
.resp-container:first-child:nth-last-child(3) ~ .resp-container  {
  width: calc(33.333% - 15px);
}

.resp-container:first-child:nth-last-child(4),
.resp-container:first-child:nth-last-child(4) ~ .resp-container  {
  width: calc(25% - 15px);
}

/*  for this demo  */
.resp-container {
  display: inline-block;
  height: 30px;
  background: red;
  margin: 5px;
}

＆＃13;

<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>

</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为什么不用CSS简单的解决方案而不需要使用jQuery或额外的类来复杂化：

＆＃13;

＆＃13;

.container {
  display: flex;
}
.resp-container {
  height: 30px;
  background: red;
  margin: 5px;
  flex:1;
}

＆＃13;

<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>

</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我刚刚学会了很多jQuery回答你的问题，但现在是：

使用.each()，$(HTMLElement)将this恢复为jQuery对象，.children()找到您想要计算的resp-container。

＆＃13;

＆＃13;

$(document).ready(function() {
  var container = $(".container");
  container.each(function() {
    var items = $(this).children(".resp-container");
    switch (items.length) {
      case 1:
        items.addClass("full-resp");
        break;
      case 2:
        items.addClass("half-resp");
        break;
      case 3:
        items.addClass("third-resp");
        break;
      case 4:
        items.addClass("fourth-resp");
        break;
      default:
        items.addClass("fourth-resp");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
  <div class="resp-container"></div>

</div>
<div class="container">
  <div class="resp-container"></div>
  <div class="resp-container"></div>
</div>
<div class="container">
  <div class="resp-container"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试vanilla JS，而不是jQuery：

const classes = ['full-resp', 'half-resp', 'third-resp', 'fourth-resp'] // array of classes that you want to add to the elements
const containers = document.querySelectorAll('.container'); // nodelist of all .container divs

containers.forEach(container => {
    // for each container...
    const respContainers = container.querySelectorAll('.resp-container'); // ... get nodelist of child .resp-container divs
    respContainers.forEach((rContainer, index) => {
        if (index < classes.length) return rContainer.classList.add(classes[index]);
        rContainer.classList.add(classes[classes.length - 1]); // if the index of the .resp-container div is larger than number of classes defined in classes array, add the last defined class to this element
    })
})