freeCodeCamp Challenge Guide: Target a Specific Child of an Element Using jQuery

Guide
1

Target a Specific Child 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");
    $(".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>
7 Likes
2

Can we have more examples explaining how target elements are used. Thanks

6 Likes
3

Hi! Majorly stuck on this challenge, not sure why my code’s not working. I very clearly have entered:

$(".target:nth-child(2)").addClass(“animated-bounce”)

Why is this not going through?

3 Likes
4

needs more clarification, this example is rather poor. where is #left-well and #right-well defined here?

answe to problem

<script>
    $(document).ready(function() {
    $(".btn:nth-child(2)").addClass("animated bounce");
  });
</script>

another valid answer to problem

<script>
    $(document).ready(function() {
    $(".target:nth-child(2)").addClass("animated bounce");
  });
</script>

also another valid answer to problem

<script>
    $(document).ready(function() {
    $(".btn-default:nth-child(2)").addClass("animated bounce");
  });
</script>

In well, there’s 3 elements and each of these have 3 classes btn, target,btn-default. You can select any of these.

nth-child(). These are called CSS pseudoselectors found here, https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Its better to implicitly define the answer like this instead, so its clear how it works:

<script>
    $(document).ready(function() {
    $(".first .btn:nth-child(2)").addClass("animated bounce");
    $(".second .btn:nth-child(2)").addClass("animated bounce");
  });
</script>

where .first class and .second class clearly defines that #left-well and #right-well are being selected.

A series of items have to be selected at a time

nth-child() selects based on the actual class, not its parent class e.g. #left-well as there could be multiple parent classes here.

See codepen.io reference

25 Likes
5

That’s great, thank you for your help!

1 Like
6

You’ve got a dash (-) in animated-bounce that doesn’t belong. It should just be “animated bounce”. i.e. $(".target:nth-child(2)").addClass(“animated bounce”);

5 Likes
7

I have to agree, this challenge is very badly written. The example is lacking explanation.

Now, reading your reasoning confused even more now haha. Let’s see where these challenges take me.

5 Likes
8

I would just ignore this part of freecodecamp and come back to it later when you learn more about CSS :stuck_out_tongue: . As a side note I find the Lynda.com CSS Essential Training Part 1 and 2 really good at covering everything I wanted to know about CSS, whereas freecodecamp only skimps the surface w/ CSS and focuses on javascript

This is how I would learn CSS

  • Use Freecodecamp and go through HTML / CSS Basics / jQuery / Bootstrap
  • Go through Lynda.com CSS Essential Training Part 1 and 2

In between familiarze yourself with all the tools developers use and pick your favorite ones

https://tympanus.net/codrops/css_reference/ ,
http://cssreference.io/ ,
https://css-tricks.com/almanac/ ,
http://overapi.com/css → overview of API CSS
https://developer.mozilla.org/en-US/docs/Web/CSS → read everything under the “reference” section. Its like the wikipedia for CSS

I personally find https://tympanus.net/codrops/css_reference/ to be the best resource in this category

write some codepen.io or jsfiddle.com to understand semantics / mini projects

Go dig through other learning material resources out there such as devtips https://www.youtube.com/user/DevTipsForDesigners to get a different perspective on CSS

10 Likes
9

So I’ve been entering every combination that I can think of to make this challenge work. I’ve had no luck thus far.

Any help will be greatly appreciated!

code capture.PNG749Ă—299 33.4 KB

10 
$("#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")
11

$(".target:nth-child(2)").addClass(“bounce”);
what wrong in this line

12

Can someone explain how the selection works with this part? I was under the impression that you would target the “.well” class and select their second child which would be “.target”, “.target” has no children as there is no other elements nested within the buttons. How does".target:nth-child(2)" select the second target in each well, and why aren’t all the buttons with the class grouped as one? Shouldn’t only #target2 be selected and not both #target2 and #target5?

8 Likes
13

Maybe I’m the only person like this, but I assumed N is a variable, so nth for 2nd element would be 2nd. :slight_smile: This works.

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

1 Like