JQuery: получить элементы по имени класса и добавить CSS для каждого из них

Question

У меня есть определенное количество блоков div, которые имеют одинаковое имя класса. Я пытаюсь что-то применить ко всем, но безуспешно. Код, который я создал до сих пор:

$(document).ready(function(){
    elements = $('div.easy_editor');
    elements.each(function() { $(this).css("border","9px solid red"); });
    //elements[0].css("border","9px solid red");
});

Не могли бы вы сказать мне, что я делаю неправильно

Answer 1

Вы можете попробовать это

 $('div.easy_editor').css({'border-width':'9px', 'border-style':'solid', 'border-color':'red'});

$('div.easy_editor') относится к коллекции всех элементов div, в которых уже есть редактор классов. Нет необходимости использовать each (), если не было какой-либо функции, которую вы хотели бы запустить на каждом из них. Метод css () фактически применяется ко всем найденным элементам div.

Answer 2

Что делает jQuery простым в использовании, так это то, что вам не нужно применять атрибуты к каждому элементу. Объект jQuery содержит массив элементов, а методы объекта jQuery применяют одинаковые атрибуты ко всем элементам в массиве.

Существует также более короткая форма для $(document).ready(function(){...}) в $(function(){...}).

Итак, это все, что вам нужно:

$(function(){
  $('div.easy_editor').css('border','9px solid red');
});

Если вы хотите, чтобы код работал для любого элемента с этим классом, вы можете просто указать класс в селекторе без имени тега:

$(function(){
  $('.easy_editor').css('border','9px solid red');
});