4.3 KiB

Raw Blame History

title

challengeType

forumTopicId

required

dashedName

bad87fee1348bd9aed108826

Mire um Filho Específico de um 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--

Você já viu o porque os atributos id são tão convenientes para mirar com seletores jQuery. Mas você nem sempre terá ids legais para trabalhar.

Felizmente, jQuery possui outros truques para apontar para os elementos certos.

jQuery usa Seletores CSS para apontar elementos. O seletor CSS target:nth-child(n) o permite selecionar todos os elementos nth com a classe ou tipo de elemento alvos.

Aqui está como você daria ao terceiro elemento em cada well a classe bounce:

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

Faça o segundo filho em cada um dos seus elementos well quicar. Você deve selecionar os filhos do elemento com a classe alvo.

--hints--

O segundo elemento nos seus elementos alvo deve quicar.

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

Apenas dois elementos devem quicar.

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

Você deve usar o seletor :nth-child() para modificar esses elementos.

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

Você deve usar apenas jQuery para adicionar essas classes ao 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