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

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

#1

jQuery uses CSS Selectors to target elements. target:nth-child(n) css selector allows you to select all the nth element with the target class or element type.

Here’s how you would give the third element in each well bounce: $(".target:nth-child(3)").addClass("animated bounce");

$(".btn:nth-child(2)").addClass("animated bounce");

#2

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


#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?


#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


#5

That’s great, thank you for your help!


#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”);


#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.


#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


#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!


#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?


#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”);