freeCodeCamp Challenge Guide: Target the Children of an Element Using jQuery

Guide
1

Target the Children of an Element Using jQuery

Solutions

Solution 1 (Click to Show/Hide) 
<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>
4 Likes
2

Hi all.

Just noticed some weirdness on that page. When it first displays, the mobile phone display shows 2 target5’s in the left well. There should only be one. What’s interesting is if you comment out the line that clones target5, it removes both. Then, if you uncomment that line, you get just the one target5 in the left well, which is what it should be at the start.

So, it seems like there is some small bug in the code that renders that mobile phone device at the beginning. It’s almost like it runs off different HTML than our editor when it first loads, and then the editor takes over once we make changes. I don’t know. Just guessing on that. Btw, I’ve tried it in both Chrome and Firefox.

I know it sounds like a small thing, but that could easily confuse someone who is very new to this.
Thanks,
Ron

3 Likes
3

Screenshot (4).png971×473 72.8 KB

Why is it showing two #target5 elements

4

Hi. I seem to be a little stuck with this.
I have followed the guidelines and have, what I think, is the correct code for this exercise. However, I am getting the dreaded ‘red cross’.

To me it should be: $("#right-well").children().css(“color”, “orange”);

Can someone point me in the right direction?

1 Like
5

reset u code and do it again !

6

Hi Aditya, see the line number 8 of your code.
The “.clone().appendTo(”#left-well")" code has created a clone of your target 5 element on the left wall.
If you remove this line, there will be no clone of the target 5 element.
Try this.

2 Likes