Target the same element with multiple jQuery Selectors(doubt)

HTML-CSS
1

Tell us what’s happening:

Hi everybody. I’m having doubts because I did this challenge without understanding it.

The title says which we are using multiples classes in a single .addClass(), and I dont understand why in $("#target1").addClass(“btn-primary”); are all of them.
Why it’s it?

Thank you!

Your code so far

<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
    
  });
</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:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://www.freecodecamp.org/challenges/target-the-same-element-with-multiple-jquery-selectors

2

I don’t think I understand exactly what your not grasping, but make sure you understand addClass.
I’ll post you here jQuery’s official notes, and feel free to ask again if there’s something you don’t get.

addClass: Adds the specified class(es) to each element in the set of matched elements.
It’s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

Source

3

Why are relationated?

$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");

it’s because of this line?:

<button class="btn btn-default target" id="target1">#target1</button>

5

I was close then. But I have another one doubt (sorry)

Why the third line it’s “btn-primary” when In the class line it’s a a btn-default class??

7

The point is:

Blockquote
Your #target1 element should have the classes animated‚ shake and btn-primary.

and I dont understand where $("#target1").addClass("btn-primary"); have all of those 3 classes

8

Before you add any jQuery code, the button element with id=“target1” only has the following two classes:
btn and btn-default

However, once you implement the three lines of code you wrote, it will have three additional (animated, shake, and btn-primary) for a total of 5 classes. You see the effects of the 3 new ones added, but the html in the editor does not show them.

1 Like
9

I understand it right now!! Thank you so much for your time