freeCodeCamp

3.7 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

bad87fee1348bd9aed008826

Target Even Elements Using jQuery

link
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css

Destinar los elementos pares usando jQuery

Description

También puede apuntar a los elementos en función de sus posiciones utilizando :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>&#58;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

3.7 KiB Raw Blame History