Jquery: получить элементы по имени класса и добавить css в каждый из них

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

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

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

Ответ 1

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

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

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

Ответ 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');
});