Target the same element with multiple jQuery Selectors(doubt)

Target the same element with multiple jQuery Selectors(doubt)
0.0 0

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


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


#4

I do not understand the above question you are asking about the three lines of code you posted.

Are you not understanding the challenge Note (seen below)?
Note

You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

The first line targets all buttons. Since the button element with id=“target1” is a button, it gets the “animated” classed added to it.

The second line targets all buttons with class .btn Since the button element with id=“target1” has the .btn class, it gets the “shake” classed added to it.

The third line directly targets the button with id=“target1”, so it should be no surprise that the class “btn-primary” added to it.


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


#6

The third line (seen below) is not selecting a class. It is selecting an id of “target1”. That # in front of “target1” designates that an element with a specific id will be selected. If it would have had a dot (.) in front, then a class would have been selected.

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

EDIT: Just in case my use of the verb target was confusing, I have changed it to select.


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


#9

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