3.7 KiB
3.7 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
bad87fee1348bd9aed008826 | Target Even Elements Using jQuery |
|
6 | Destinar los elementos pares usando jQuery |
Description
:odd
selectores :odd
o :even
. Tenga en cuenta que jQuery tiene un índice de cero, lo que significa que el primer elemento de una selección tiene una posición de 0. Esto puede ser un poco confuso ya que, en contra de la intuición,: :odd
selecciona el segundo elemento (posición 1), cuarto elemento (posición 3) , y así. A continuación, te indicamos cómo dirigirías todos los elementos impares con la clase target
y les darías clases: $(".target:odd").addClass("animated shake");
Intenta seleccionar todos los elementos target
uniformes y dales las clases de animated
y shake
. Recuerde que incluso se refiere a la posición de los elementos con un sistema basado en cero en mente. Instructions
Tests
tests:
- text: Todos los elementos de <code>target</code> que jQuery considera que están parejos deben sacudirse.
testString: 'assert($(".target:even").hasClass("animated") && $(".target:even").hasClass("shake"), "All of the <code>target</code> elements that jQuery considers to be even should shake.");'
- text: 'Debe utilizar el selector <code>:even</code> para modificar estos elementos.'
testString: 'assert(code.match(/\:even/g), "You should use the <code>:even</code> selector to modify these elements.");'
- text: Solo use jQuery para agregar estas clases al elemento.
testString: 'assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/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");
$("#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>
Solution
// solution required