JQuery Odd and Even
From w3cyberlearnings
Contents |
jQuery Odd and Even Selector
Assign HTML elements use :odd and :even selector.
Syntax
$('ul.list88 li:even').css('background-color','gray');
$('ul.list88 li:odd').css('background-color','red');
Note
Example 1 TRY-IT
<!DOCTYPE html>
<html>
<head>
<title>Odd and Even</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('ul.list88 li:even').css('background-color','gray');
$('ul.list88 li:odd').css('background-color','red');
});
</script>
</head>
<body>
<ul class="list88">
<li>Soft ware</li>
<li>Soft wear</li>
<li>Soft where</li>
<li>Soft vhere</li>
</ul>
</body>
</html>
Example 2 TRY-IT
<script>
$(document).ready(function(){
$('p:even').css('background-color','gray');
$('p:odd').css('background-color','red');
});
</script>
<body>
<p class="list88">Wonderful</p>
<p class="list88">Powerful</p>
<p class="list88">Great</p>
<p class="list88">Excellent</p>
</body>
Related Links
- JQuery Set Font Size
- jQuery Set Background
- jQuery Odd and Even
