Форум

walker1232 · #1 (**permalink**) 21.04.2016, 08:08

Помогите пожалуйста, нужен код чтобы считывал количество

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

на странице, и если оно равно 1 то добавлял класс "only__one", если больше 1(2 или более) удалял класс "only__one", и добавлял класс "more__than".

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

рони · #2 (**permalink**) 21.04.2016, 11:20

walker1232,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .only__one {
        background-color: #FF00FF;
   }
   .more__than {
     background-color: #00FF7F;
   }
   .item {
     padding: 5px; height: 100px; width: 100px; margin: 4px;
   }
  .container {
     border: 1px dashed Gray;
     display:  table;
  }

 </style>


  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var container = document.querySelectorAll(".container");
    [].forEach.call(container, function(el) {
        var item = el.querySelectorAll(".item"),
            cls = ["only__one", "more__than"][+(item.length > 1)];
        [].forEach.call(item, function(el) {
            el.classList.add(cls)
        })
    })
});
  </script>
</head>

<body>
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

ruslan_mart · #3 (**permalink**) 22.04.2016, 04:38

.container .item:first-of-type:last-of-type {
   ...
}

Форум

Справочник

Discord чат

Курсы javascript