jquery: récupère les éléments par nom de classe et ajoute css à chacun d'entre eux

Question

J'ai un certain nombre de boîtes div qui ont toutes le même nom de classe. J'essaie d'appliquer quelque chose à tous mais je n'ai pas de chance. Le code que je construisais jusqu'à présent est

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

Pourriez-vous s'il vous plaît me dire ce que je fais mal

Answer 1

Vous pouvez essayer cette

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

Le $('div.easy_editor') fait référence à une collection de tous les divs qui ont l'éditeur de classe facile déjà. Il n'est pas nécessaire d'utiliser each() à moins qu'il y ait une fonction que vous vouliez exécuter sur chacun d'eux. La méthode css() s'applique à tous les divs que vous trouvez.

Answer 2

Ce qui rend jQuery facile à utiliser, c'est qu'il n'est pas nécessaire d'appliquer des attributs à chaque élément. L'objet jQuery contient un tableau d'éléments et les méthodes de l'objet jQuery appliquent les mêmes attributs à tous les éléments du tableau.

Il existe également une forme plus courte pour $(document).ready(function(){...}) dans .

Donc, cela est tout ce que vous avez besoin:

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

Si vous voulez que le code fonctionne pour tout élément avec cette classe, il vous suffit de spécifier la classe dans le sélecteur sans le nom de tag:

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