freeCodeCamp

3.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aed208826	Target the Children of an Element Using jQuery	6		Segmente os filhos de um elemento usando jQuery

Description

Quando os elementos HTML são colocados um nível abaixo do outro, eles são chamados children desse elemento. Por exemplo, os elementos de botão neste desafio com o texto "# target1", "# target2" e "# target3" são todos children do elemento <div class="well" id="left-well"> . jQuery tem uma função chamada children() que permite que você acesse os filhos de qualquer elemento selecionado. Aqui está um exemplo de como você usaria a função children() para dar aos filhos do seu elemento de left-well a cor blue : $("#left-well").children().css("color", "blue")

Instructions

Dê a todas as crianças do seu elemento do right-well a cor laranja.

Tests

tests:
  - text: 'Todos os filhos de <code>#right-well</code> devem ter texto em laranja.'
    testString: 'assert($("#right-well").children().css("color") === "rgb(255, 165, 0)", "All children of <code>#right-well</code> should have orange text.");'
  - text: Você deve usar a função <code>children()</code> para modificar esses elementos.
    testString: 'assert(code.match(/\.children\(\)\.css/g), "You should use the <code>children&#40&#41</code> function to modify these elements.");'
  - text: Use apenas o jQuery para adicionar essas classes ao elemento.
    testString: 'assert(code.match(/<div class="well" id="right-well">/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");

  });
</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.2 KiB Raw Blame History