Https://www.freecodecamp.org/learn/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery

JavaScript
1

Tell us what’s happening:

I’m not sure what is the correct solution to this but I’m having a hard time passing this level.

I presume that target:nth-child(n) n is the target (in this case - 2)

From my understanding of this concept - this code:

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

Should be changed to:

$("#left-well:nth-child(2)").addClass(“animated bounce”);

I tried using the class well but it’ll target both left and right wells and the 2nd child is also not working.

But it’s not working. Any help will be appreciated. Thank you so much!

Your code so far


<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");
  $("#left-well:nth-child(2)").addClass("animated bounce");
  $("#right-well: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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36 Edg/83.0.478.37.

Challenge: Target a Specific Child of an Element Using jQuery

Link to the challenge:

2

I guess the point of confusion here is that element:nth-child selector is not selecting nth child of this element, but element when it is the nth child of some other element. You’re trying to select #right-well when you actually need .target.

https://www.w3schools.com/cssref/sel_nth-child.asp

3

So if it’s “.target”, then it’ll be .well? With this solution, both wells were bouncing and not the specific nth-child which is the 2nd button?

4

It is literally the example code just targeting the second child instead of the third (i.e. (2) instead of (3)).

second child in each of your well elements

The elements with the .target class is the child elements and the .well element is the parent.

MDN: :nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

5

If you need .target select .target