Quick question on :nth-child

JavaScript
1

Tell us what’s happening:
I’ve read through the mdn docs so I understand that it selects the siblings of .target. My question is why do we select target with .target instead of #target? Since it’s an id not a class isn’t it? Or is an id also a class?
Thanks in advance.

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

Your browser information:

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

Challenge: Target a Specific Child of an Element Using jQuery

Link to the challenge:

2

An ID it not a class. Think of ID as a definite way to identify single elements much like a bunch of people at a party all with unique name ID tags and you say, “Oh, her name ID tag is ‘Phyllis’ and their ID name tag is ‘Vijay’.”. Same with HTML elements…there can only be one #target1 and only one #target2.

If you select ‘target’ as a class it selects all HTML elements with that class and puts them in an array-like structure either called a NodeList or an HTMLCollection. So you would access the first element using [0] and the second element [1]. They’re a collection of elements rounded up by a similiar class. They all could be rounded up by the fact that they’er all buttons, too. So you could select them all by their similar HTML tags ‘button’.

With collections you would generally use loops or accessing by index [0], [1], [2], etc. if you wanted to get and change individual elements.

I should have added that this line $(".target:nth-child(2)").addClass("animated bounce") using nth-child is saying “select the 2nd element in the collection of HTML elements with the class of ‘target’ then add 2 classes to it called ‘animated’ and ‘bounce’”

1 Like
3

Thanks for the response after reading this and going back over the code I realize I missed where the target class was and was reading the id target(n) instead of the class. Now it all makes sense, thanks.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.