如何将“奇数”和“偶数”类添加到 div（Jquery）？
Posted
技术标签:
【中文标题】如何将“奇数”和“偶数”类添加到 div（Jquery）？【英文标题】：How to add 'odd' and 'even' classes to divs (Jquery)? 【发布时间】：2015-05-29 09:41:00 【问题描述】：如何使用 Jquery 向 div 添加“奇数”和“偶数”类？ 我有这个html
<div class="carousel" >
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
我需要在 'div.item' 中添加 'odd' 和 'even' 类来获得这个
<div class="carousel" >
<div class="item odd"></div>
<div class="item even"></div>
<div class="item odd"></div>
<div class="item even"></div>
</div>
【问题讨论】：
【参考方案1】：您可以使用:odd 和:even 选择器
$('.carousel item:odd').addClass('odd');
$('.carousel item:even').addClass('even');
【讨论】：
【参考方案2】：您可以使用:odd 和:even 伪选择器。
$('.item:odd').addClass('odd');
$('.item:even').addClass('even');
演示：http://jsfiddle.net/tusharj/tdhbh9un/
:odd:
选择奇数元素，零索引。
文档：https://api.jquery.com/odd-selector/
:even:
选择偶数元素，零索引
文档：https://api.jquery.com/even-selector/
【讨论】：
【参考方案3】：使用 css3 :nth-child
$('.carousel .item:nth-child(even)').addClass('even');
$('.carousel .item:nth-child(odd)').addClass('odd');.odd
color: red;
.even
color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>或 jQuery odd/even 选择器 - 您需要交换类和选择器，因为在 jQuery 中索引以 0 开头
$('.carousel .item:nth-child(even)').addClass('even');
$('.carousel .item:nth-child(odd)').addClass('odd');.odd
color: red;
.even
color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>【讨论】：
【参考方案4】：试试这个：
$('.carousel item:odd').addClass('odd');
$('.carousel item:even').addClass('even');
【讨论】：
【参考方案5】：将 odd 类分配给 even 并将 even 类分配给 odd 将产生所需的结果
即：
$(".carousel div:even").addClass( "odd" );
与
$(".carousel div:odd").addClass( "even" );
将产生所需的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Create a polyline using Geolocation and Google Maps API</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function()
$(".carousel div:even").addClass( "odd" );
$(".carousel div:odd").addClass( "even" );
alert($(".carousel").html());
);
</script>
</head>
<body>
<div class="carousel" >
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>【讨论】：
以上是关于如何将“奇数”和“偶数”类添加到 div（Jquery）？的主要内容，如果未能解决你的问题，请参考以下文章