将 CSS 样式/类应用于 div

发布于 2024-11-07 15:41:16 字数 320 浏览 0 评论 0原文

我有一些 div 元素
结构是

<div id="comment">  
  <div id="m1">...</div>  
  <div id="m2">...</div>  
</div>

我想将一些CSS或类应用到评论的偶数/奇数内部div（或m1/m2 div）
所以我编码了这个，但它不起作用:(

$("div>div:even").addClass("evn");

我缺少什么？

原文

I have some div elements
The structure is

<div id="comment">  
  <div id="m1">...</div>  
  <div id="m2">...</div>  
</div>

I want to apply some CSS or Class to the even/odd inner div of comments (or to the m1/m2 div)
So i coded this, but it did not worked :(

$("div>div:even").addClass("evn");

What i'm missing ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过期情话 2024-11-14 15:41:16

:even 和 :odd 是 0 索引，可能不会产生您正在寻找的结果。第一个元素是数字 0，它是偶数，因此它被 :even 选择，而不是第二个。

对于 1 索引，您缺少 :nth-child()伪类：

$("div > div:nth-child(even)").addClass("evn");

确保你也正确拼写了类名，我不知道你的CSS是否定义了.evn类...

:even and :odd are 0-indexed, and may not produce results you're looking for. The first element is number 0, and that's even, so it gets selected by :even, rather than the second one.

For 1-indexing, you're missing the :nth-child() pseudo-class:

$("div > div:nth-child(even)").addClass("evn");

Make sure that you spelled the class name correctly too, I don't know if your CSS defines an .evn class...

回复收藏 0 原文

热血少△年 2024-11-14 15:41:16

此链接可以帮助您解决问题

首先，在“index.html”文件中定义表格和div，如下所示，

<table border="1">
  <tr><td>Michael</td></tr>
  <tr><td>Sam</td></tr>
  <tr><td>John</td></tr>
  <tr><td>Jason</td></tr>
</table>
 <div>Michael</div>
 <div>Sam</div>
 <div>John</div>
 <div>Jason</div>

现在，我们需要编写用于在交替行中显示不同颜色的脚本，

<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
  //for div
  $("div:odd").css("background-color", "#F4F4F8");
  $("div:even").css("background-color", "#EFF1F1");
  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");
});
</script>

过滤器“even”和“odd”可用于jQuery 用于选择元素的奇数或偶数索引。如上所示，奇数和偶数“div”的背景颜色使用 jQuery 的“css”方法和“奇数”和“偶数”过滤器进行更改，同样适用对于偶数和奇数“tr”，这意味着表的行。

This link can help you to solve your proble

First , define the tables and div as shown below in the “index.html” file,

<table border="1">
  <tr><td>Michael</td></tr>
  <tr><td>Sam</td></tr>
  <tr><td>John</td></tr>
  <tr><td>Jason</td></tr>
</table>
 <div>Michael</div>
 <div>Sam</div>
 <div>John</div>
 <div>Jason</div>

Now, we need to write the script for displaying the different color in the alternate row,

<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
  //for div
  $("div:odd").css("background-color", "#F4F4F8");
  $("div:even").css("background-color", "#EFF1F1");
  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");
});
</script>

The filters “even” and “odd” can be used in jQuery for selecting odd or even index of the elements.As you can see above the background color of the odd and even “div” are changed using the “css” method and “odd” and “even” filters of jQuery and the same applies for the even and odd “tr” which means for the row of table.

回复收藏 0 原文

~没有更多了~