主页 / 问题 / 1308918
Accepted
Alex
Asked:2022-07-26 15:36:37 +0000 UTC2022-07-26 15:36:37 +0000 UTC

如何计算每个单独 div 内的块数并按条件添加类？

  • 772

告诉我如何计算div.item每个单独的块中的块数，如果其中的块数超过 3 块，则div.content添加div.content一个类？div.item

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

javascript

3 个回答

  1. Best Answer

    document.querySelectorAll('.content').forEach(el => {
    if (el.querySelectorAll('.item').length > 3)
       el.classList.add("my-class");
});
    .my-class {
    background: blue;
    color:white;
}


.content {
    margin: 5px;
}
    <div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

    • 2

  2. 我们遍历所有元素.content，.querySelectorAll()然后.forEach()遍历它们，并在每个元素中.item遍历相同的元素.querySelecorAll并查看它们的数量.length

    document.querySelectorAll('.content').forEach(function(e){ // Проходим циклом по всем .content
  if(e.querySelectorAll('.item').length > 3) // если в контент .item больше 3х
    e.classList.add('green'); // то .content добавляем класс .green
})
    .content {
  margin-bottom: 10px;
}

.item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
}

.green .item {
  background: green;
}
    <div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    jQuery中的类似选项

    $('.content').each(function(){
  if($(this).find('.item').length > 3)
    $(this).addClass('green')
})
    .content {
  margin-bottom: 10px;
}

.item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ccc;
}

.green .item {
  background: green;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 1 

  3. document.querySelectorAll('.content').forEach(el => {
  if (el.childElementCount > 3) el.classList.add('myclass')
})
    <div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 1

相关问题