CODEWITHSUNDEEP
jquery
Santu
Santu

Reputation: 121

Insert Icon class to a each div with different ID

I have the below Code

`<div id="55"> 
    <span class="icon-style">
        <i class=""> </i>
    </span>
</div>

<div id="56"> 
    <span class="icon-style">
        <i class=""> </i>
    </span>
</div>


<div id="57"> 
    <span class="icon-style">
        <i class=""> </i>
    </span>
</div>


<div id="58"> 
    <span class="icon-style">
        <i class=""> </i>
    </span>
</div>

`

I need to insert the Icon class (Ex: far fa-smile) from Jquery in the class. I have access to the div id. Using div id I need to insert it.

For each id, I have different icons, which I need to dynamically tie it using jquery. I have access to the id like 55,56,57,58...I need to add icon class for each div based on the id.

Upvotes: 0

Views: 794

Answers (1)

Arun AK
Arun AK

Reputation: 4370

You can do something like this:

jQuery(document).ready(function(){
   $("#55 span i").addClass("fa-simple")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`<div id="55">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>

<div id="56">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>


<div id="57">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>


<div id="58">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>

`

You can also create an array with the div id and the icon classname and add the class dynamically.

jQuery(document).ready(function(){
	
  var icon_list = [{
  id: 55,
  iconClass: 'fa-simple1'
  },
  {
  id: 56,
  iconClass: 'fa-simple2'
  },
  {
  id: 57,
  iconClass: 'fa-simple3'
  },
  {
  id: 58,
  iconClass: 'fa-simple4'
  }]
  
  for(let i=0; i<icon_list.length; i++){
  	$("#"+ icon_list[i]['id'] +" span i").addClass(icon_list[i]['iconClass'])
}


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

`<div id="55">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>

<div id="56">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>


<div id="57">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>


<div id="58">
  <span class="icon-style">
    <i class=""> </i>
  </span>
</div>

`

Hope it helps :)

Upvotes: 1

Related Questions