2018-10-10 22:03:03 +00:00
---
id: bad87fee1348bd9aed008826
2021-02-06 04:42:36 +00:00
title: Target Even Elements Using jQuery
2018-10-10 22:03:03 +00:00
challengeType: 6
2020-09-07 08:17:51 +00:00
forumTopicId: 18318
2020-12-16 07:37:30 +00:00
required:
2021-02-06 04:42:36 +00:00
-
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
2021-01-13 02:31:00 +00:00
dashedName: target-even-elements-using-jquery
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2020-09-07 08:17:51 +00:00
2021-02-06 04:42:36 +00:00
You can also target elements based on their positions using `:odd` or `:even` selectors.
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
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, `:odd` selects the second element (position 1), fourth element (position 3), and so on.
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
Here's how you would target all the odd elements with class `target` and give them classes:
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
`$(".target:odd").addClass("animated shake");`
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
Try selecting all the even `target` elements and giving them the classes of `animated` and `shake` . Remember that **even** refers to the position of elements with a zero-based system in mind.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
All of the `target` elements that jQuery considers to be even should shake.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
$('.target:even').hasClass('animated') & & $('.target:even').hasClass('shake')
);
2018-10-10 22:03:03 +00:00
```
2021-02-06 04:42:36 +00:00
You should use the `:even` selector to modify these elements.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(code.match(/\:even/g));
```
2020-09-07 08:17:51 +00:00
2021-02-06 04:42:36 +00:00
You should only use jQuery to add these classes to the element.
2020-09-07 08:17:51 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
code.match(/\$\(".target:even"\)/g) ||
code.match(/\$\('.target:even'\)/g) ||
code.match(/\$\(".target"\).filter\(":even"\)/g) ||
code.match(/\$\('.target'\).filter\(':even'\)/g)
);
2018-10-10 22:03:03 +00:00
```
2020-08-13 15:24:35 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --seed-contents--
```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 >
```
2020-12-16 07:37:30 +00:00
# --solutions--
2021-01-13 02:31:00 +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 >
```