Doubt in .target:nth-child

Doubt in .target:nth-child
0.0 0

#1

I wanted to know how does jQuery know which target we are referring to. In the exercise of freecodecamp it refers to the wells, but we never mentioned that the target must be wells! So how does it come to know that?


#2

You provide the id in the selector. Ids are unique and only refer to one specific element.


#3

Yes, but in this nth-child function there was no id selected in the given example.
Simply $(".target:nth-child()")… was used.


#4

In this case it’s identifying by the class target. It will apply this to all elements with the class target.


#5

*Please see this code where the function was used. This is the example here at freecodecamp. There is no target class.

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

#6

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#7

The .target in the above selector refers to all the divs with class=“target”. If we only had $(".target").addClass("animate bounce); then all 6 divs would bounce.

The extra :nth-child(2) part on the end of the first part selects the 2nd child with class=“target” within each parent. In this case, there are 3 divs with class=“target” in the div with id=“left-well” and 3 divs with class=“target” in the div with id=“right-well”. As a result, only the divs with id=“target2” and id=“target5” get selected and have the “animated bounce” classes added to them.


#8

There are 6 buttons with the class target


#9

Ok Thanks a lot. I was misreading the code a bit.


#10

Got it. Thank you so much for your help.