2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aed008826
title: Target Even Elements Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
2019-07-31 18:32:23 +00:00
forumTopicId: 18318
2018-09-30 22:01:58 +00:00
---
## Description
< section id = 'description' >
You can also target elements based on their positions using < code > :odd< / code > or < code > :even< / code > selectors.
Note that jQuery is zero-indexed which means the first element in a selection has a position of 0. This can be a little confusing as, counter-intuitively, < code > :odd< / code > selects the second element (position 1), fourth element (position 3), and so on.
Here's how you would target all the odd elements with class < code > target< / code > and give them classes:
< code > $(".target:odd").addClass("animated shake");< / code >
Try selecting all the even < code > target< / code > elements and giving them the classes of < code > animated< / code > and < code > shake< / code > . Remember that < strong > even< / strong > refers to the position of elements with a zero-based system in mind.
< / section >
## Instructions
< section id = 'instructions' >
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: All of the < code > target</ code > elements that jQuery considers to be even should shake.
2019-07-25 06:53:37 +00:00
testString: assert($('.target:even').hasClass('animated') & & $('.target:even').hasClass('shake'));
2018-10-20 18:02:47 +00:00
- text: You should use the < code > : even</ code > selector to modify these elements.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/\:even/g));
2018-10-04 13:37:37 +00:00
- text: Only use jQuery to add these classes to the element.
2019-07-25 06:53:37 +00:00
testString: assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\('.target:even'\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\('.target'\).filter\(':even'\)/g));
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< script >
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
});
< / script >
<!-- Only change code above this line. -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-04-28 19:28:47 +00:00
```html
< script >
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
});
< / script >
<!-- Only change code above this line. -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```
2019-07-18 15:24:12 +00:00
2018-09-30 22:01:58 +00:00
< / section >