Почему событие применяется не ко всем элементам?

276

15 февраля 2018, 14:15

Есть блоки

       <div id="cat-mini-item">
            <div id="cat-mini-itemName">
                Компьютеры
            </div>
            <div id="cat-mini-itemOpen"></div>
            <div id="cat-mini-list">
                <a href="">
                    <div id="cat-mini-list-item">
                        Ноутбуки
                    </div>
                </a>
                <a href="">
                    <div id="cat-mini-list-item">
                        Системные блоки
                    </div>
                </a>
                <a href="">
                    <div id="cat-mini-list-item">
                        Моноблоки
                    </div>
                </a>
            </div>  
        </div>
        <a href="">
            <div id="cat-mini-item-one">
                <div id="cat-mini-itemName">
                    Мониторы
                </div>
            </div>
        </a>
        <div id="cat-mini-item">
            <div id="cat-mini-itemName">
                Манипуляторы и аксессуары
            </div>
            <div id="cat-mini-itemOpen"></div>
            <div id="cat-mini-list">
                <a href="">
                    <div id="cat-mini-list-item">
                        Клавиатуры
                    </div>
                </a>
                <a href="">
                    <div id="cat-mini-list-item">
                        Компьютерные мыши
                    </div>
                </a>
                <a href="">
                    <div id="cat-mini-list-item">
                        Коврики
                    </div>
                </a>
            </div>  
        </div>

Пытаюсь присвоить блокам #cat-mini-item событие:

$.each($('#cat-mini-item'), function(index, value) { 
    $(this).on("click", function(){
    $(this).children('#cat-mini-list').slideToggle(300);
        $(this).css({"height":"auto"});
        $(this).css({"padding-bottom":"0"});
    });
});

Но данное событие присваивается, почему-то только первому (Компьютеры)

Answer 1

Идентификатор на странице может быть только в единственном экземпляре, используйте классы:

$.each($('.cat-mini-item'), function(index, value) { 
  $(this).on("click", function() { 
    $(this).children('.cat-mini-list').slideToggle(300); 
    $(this).css({ 
      "height": "auto" 
    }); 
    $(this).css({ 
      "padding-bottom": "0" 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cat-mini-item"> 
  <div class="cat-mini-itemName"> 
    Компьютеры 
  </div> 
  <div class="cat-mini-itemOpen"></div> 
 
  <div class="cat-mini-list"> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Ноутбуки 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Системные блоки 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Моноблоки 
      </div> 
    </a> 
 
  </div> 
</div> 
 
<a href=""> 
  <div class="cat-mini-item-one"> 
    <div class="cat-mini-itemName"> 
      Мониторы 
    </div> 
  </div> 
</a> 
 
<div class="cat-mini-item"> 
  <div class="cat-mini-itemName"> 
    Манипуляторы и аксессуары 
  </div> 
  <div class="cat-mini-itemOpen"></div> 
 
  <div class="cat-mini-list"> 
    <a href=""> 
      <div id="cat-mini-list-item"> 
        Клавиатуры 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Компьютерные мыши 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Коврики 
      </div> 
    </a> 
 
  </div> 
</div>

Answer 2

Так как id - уникальный идентификатор, если css может обращаться к нескольким элементам с одинаковым id, то javascript - нет.

Answer 3

Все дело в том, что вы пытаетесь присвоить значение по id, который должен быть уникальным, для того, чтобы все работало, нужно использовать class

$.each($('.cat-mini-item'), function(index, value) { 
  $(this).on("click", function() { 
    $(this).children('.cat-mini-list').slideToggle(300); 
    $(this).css({ 
      "height": "auto" 
    }); 
    $(this).css({ 
      "padding-bottom": "0" 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cat-mini-item"> 
  <div id="cat-mini-itemName"> 
    Компьютеры 
  </div> 
  <div class="cat-mini-itemOpen"></div> 
 
  <div class="cat-mini-list"> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Ноутбуки 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Системные блоки 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Моноблоки 
      </div> 
    </a> 
 
  </div> 
</div> 
 
<a href=""> 
  <div class="cat-mini-item-one"> 
    <div class="cat-mini-itemName"> 
      Мониторы 
    </div> 
  </div> 
</a> 
 
<div class="cat-mini-item"> 
  <div class="cat-mini-itemName"> 
    Манипуляторы и аксессуары 
  </div> 
  <div class="cat-mini-itemOpen"></div> 
 
  <div class="cat-mini-list"> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Клавиатуры 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Компьютерные мыши 
      </div> 
    </a> 
    <a href=""> 
      <div class="cat-mini-list-item"> 
        Коврики 
      </div> 
    </a> 
 
  </div> 
</div>