Скрипт применяется только к одному идентификатору

#javascript

Есть скрипт:



$(document).ready(function() {
  var element = $('#divv');

  function math_height() {
    element.height(element.width());
  }
  math_height();
  $(window).on('resize', function() {
    math_height();
  });
});


a
b
c
d




Скрипт работает только с первым 'div' на странице. Т.е. на странице отобразится правильно
только первый блок.

Как сделать так что бы скрипт отработал со всеми одинаковыми идентификаторами?
    

Ответы

Ответ 1

Это потому что ID должен быть уникальным, их нельзя несколько одинаковых. Используйте
классы вместо ID.



$(document).ready(function() {
  var element = $('.divv');

  function math_height() {
    element.height(element.width());
  }
  math_height();
  $(window).on('resize', function() {
    math_height();
  });
});


a
b
c
d


Ответ 2

Вы можете использовать классы вместо идентификаторов.

Если по непонятным причинам вам нужно использовать именно id, то можно использовать
document.querySelectorAll.

Пример на JSFiddle

С вашим кодом:



$(document).ready(function() {
  function math_height(element) {
    element.height(element.width());
  }

  for (const vanillaElement of document.querySelectorAll('#divv')) {
    const element = $(vanillaElement);
    math_height(element);
    $(window).on('resize', function() {
      math_height(element);
    });
  }
});


a
b
c
d