jquery:按类名获取元素并为每个元素添加css

时间:2021-04-09 14:29:20

I have a certain number of div boxes that all have the same class name. I am trying to apply something to them all but have no luck. The code I constructed so far is

我有一定数量的div框,它们都有相同的类名。我试图向他们申请一些东西,但没有运气。我到目前为止构建的代码是

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

Could you please tell me what I am doing wrong

你能告诉我我做错了吗?

2 个解决方案

#1


41  

You can try this

你可以试试这个

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

The $('div.easy_editor') refers to a collection of all divs that have the class easy editor already. There is no need to use each() unless there was some function that you wanted to run on each. The css() method actually applies to all the divs you find.

$('div.easy_editor')指的是已经拥有类简易编辑器的所有div的集合。除非你想在每个函数上运行某些函数,否则不需要使用each()。 css()方法实际上适用于您找到的所有div。

#2


6  

What makes jQuery easy to use is that you don't have to apply attributes to each element. The jQuery object contains an array of elements, and the methods of the jQuery object applies the same attributes to all the elements in the array.

使jQuery易于使用的原因是您不必将属性应用于每个元素。 jQuery对象包含一个元素数组,jQuery对象的方法将相同的属性应用于数组中的所有元素。

There is also a shorter form for $(document).ready(function(){...}) in $(function(){...}).

$(function(){...})中还有$(document).ready(function(){...})的缩写形式。

So, this is all you need:

所以,这就是你所需要的:

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

If you want the code to work for any element with that class, you can just specify the class in the selector without the tag name:

如果希望代码适用于具有该类的任何元素,则只需在选择器中指定不带标记名称的类:

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

#1


41  

You can try this

你可以试试这个

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

The $('div.easy_editor') refers to a collection of all divs that have the class easy editor already. There is no need to use each() unless there was some function that you wanted to run on each. The css() method actually applies to all the divs you find.

$('div.easy_editor')指的是已经拥有类简易编辑器的所有div的集合。除非你想在每个函数上运行某些函数,否则不需要使用each()。 css()方法实际上适用于您找到的所有div。

#2


6  

What makes jQuery easy to use is that you don't have to apply attributes to each element. The jQuery object contains an array of elements, and the methods of the jQuery object applies the same attributes to all the elements in the array.

使jQuery易于使用的原因是您不必将属性应用于每个元素。 jQuery对象包含一个元素数组,jQuery对象的方法将相同的属性应用于数组中的所有元素。

There is also a shorter form for $(document).ready(function(){...}) in $(function(){...}).

$(function(){...})中还有$(document).ready(function(){...})的缩写形式。

So, this is all you need:

所以,这就是你所需要的:

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

If you want the code to work for any element with that class, you can just specify the class in the selector without the tag name:

如果希望代码适用于具有该类的任何元素,则只需在选择器中指定不带标记名称的类:

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