4.3 KiB

Raw Blame History

title

challengeType

forumTopicId

required

dashedName

bad87fee1348bd9aed108826

Individuare il figlio specifico di un elemento usando jQuery

18315

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

target-a-specific-child-of-an-element-using-jquery

--description--

Hai già visto che gli attributi id sono molto convenienti per selezionare degli elementi con jQuery. Ma non avrai sempre degli id puliti con cui lavorare.

Fortunatamente, jQuery ha degli altri trucchi per la selezione degli elementi desiderati.

jQuery utilizza i selettori CSS per identificare gli elementi. Il selettore CSS target:nth-child(n) consente di selezionare tutti gli ennesimi elementi di una certa classe o tipo.

Ecco come potresti dare al terzo elemento in ogni well la classe bounce:

$(".target:nth-child(3)").addClass("animated bounce");

Fai rimbalzare il secondo figlio in ciascuno dei tuoi elementi well. Devi selezionare i figli degli elementi con la classe target.

--hints--

Il secondo elemento negli elementi target dovrebbe rimbalzare.

assert(
  $('.target:nth-child(2)').hasClass('animated') &&
    $('.target:nth-child(2)').hasClass('bounce')
);

Solo due elementi dovrebbero rimbalzare.

assert($('.animated.bounce').length === 2);

Dovresti usare il selettore :nth-child() per modificare questi elementi.

assert(code.match(/\:nth-child\(/g));

Dovresti usare solo jQuery per aggiungere queste classi all'elemento.

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)
);

--seed--

--seed-contents--

<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>

--solutions--

<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");
    $(".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>

4.3 KiB Raw Blame History