3.4 KiB
3.4 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
bad87fee1348bd9aed108826 | Target a Specific Child of an Element Using jQuery |
|
6 |
Description
target:nth-child(n)
CSS selector allows you to select all the nth elements with the target class or element type.
Here's how you would give the third element in each well the bounce class:
$(".target:nth-child(3)").addClass("animated bounce");
Make the second child in each of your well elements bounce. You must select the elements' children with the target
class.
Instructions
Tests
tests:
- text: The second element in your <code>target</code> elements should bounce.
testString: assert($(".target:nth-child(2)").hasClass("animated") && $(".target:nth-child(2)").hasClass("bounce"), 'The second element in your <code>target</code> elements should bounce.');
- text: Only two elements should bounce.
testString: assert($(".animated.bounce").length === 2, 'Only two elements should bounce.');
- text: You should use the <code>:nth-child()</code> selector to modify these elements.
testString: assert(code.match(/\:nth-child\(/g), 'You should use the <code>:nth-child()</code> selector to modify these elements.');
- text: Only use jQuery to add these classes to the element.
testString: assert(code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\('.target:nth-child\(2\)'\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) || code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g), 'Only use jQuery to add these classes to the element.');
Challenge Seed
<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");
});
</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>
Solution
// solution required