Aro Parada
Aro Parada

Reputation: 82

jquery DOM manipulation adding classes html

how would i add a class to the "col" of the just the "1 of 3"'s with out changing the bootstrap that it gives me

<div class="container">
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col-6">
        2 of 3 (wider)
      </div>
      <div class="col">
        3 of 3
      </div>
<div class="container">
    <div class="row">
       <div class="col">
        1 of 3
        </div>
        <div class="col-6">
        2 of 3 (wider)
        </div>
        <div class="col">
         3 of 3
        </div>

$("#col").addClass("hour");

});

Upvotes: 0

Views: 33

Answers (2)

Robo Robok
Robo Robok

Reputation: 22755

You shouldn't use the same ID for multiple elements. Behind the scenes, jQuery uses document.getElementById() whenever you use a #xxx selector. And that always returns just the first element with selected ID.

Use a class instead.

Upvotes: 0

sverek
sverek

Reputation: 51

HTML can't work with multiple same ids. ID must be unique. If you want to add class to multiple elements, identify them by class instead.

<div class="container">
    <div class="row">
      <div class="time" class="col">
        1 of 3
      </div>
      <div class="col-6">
        2 of 3 (wider)
      </div>
      <div class="col">
        3 of 3
      </div>
<div class="container">
    <div class="row">
       <div class="time" class="col">
        1 of 3
        </div>
        <div class="col-6">
        2 of 3 (wider)
        </div>
        <div class="col">
         3 of 3
        </div>

$(".time").addClass("hour");

So you basically adding "hour" class to all elements with "time" class name

Upvotes: 0

Related Questions