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

帮助请完成代码。我需要分别计算每个容器中 .resp 容器的数量。然后，您可以在交换机中滚动此数字并将相应的类分配给容器中的每个元素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>

您可以使用

.each()，请查看下面的代码段....

$(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"); 
}
  })
  
 
});

.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%;
}
}

<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>

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

堆栈代码段

.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;
}

<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>

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

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

<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>

我刚刚学到了很多 jQuery 来回答你的问题，但这里是：

使用 .each() ，$(HTMLElement) this重新转换为 jQuery 对象，.children()查找要计数的resp-container。

$(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");
    }
  });
});

<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>

尝试 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
    })
})

相关内容

最新更新

热门标签：