freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType
bad87fee1348bd9aed208826	Target the Children of an Element Using jQuery	6

Description

When HTML elements are placed one level below another they are called children of that element. For example, the button elements in this challenge with the text "#target1", "#target2", and "#target3" are all children of the <div class="well" id="left-well"> element. jQuery has a function called children() that allows you to access the children of whichever element you've selected. Here's an example of how you would use the children() function to give the children of your left-well element the color blue: $("#left-well").children().css("color", "blue")

Instructions

Give all the children of your right-well element the color orange.

Tests

tests:
  - text: All children of <code>#right-well</code> should have orange text.
    testString: assert($("#right-well").children().css("color") === 'rgb(255, 165, 0)', 'All children of <code>#right-well</code> should have orange text.');
  - text: You should use the <code>children&#40&#41</code> function to modify these elements.
    testString: assert(code.match(/\.children\(\)\.css/g), 'You should use the <code>children&#40&#41</code> function to modify these elements.');
  - text: Only use jQuery to add these classes to the element.
    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.0 KiB Raw Blame History