jquery - 将 Icon 类插入到具有不同 ID 的每个 div

Question

我有以下代码

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

`

我需要在类中插入来自 Jquery 的 Icon 类（例如：far fa-smile）。我可以访问 div id。使用 div id 我需要插入它。

对于每个 id，我有不同的图标，我需要使用 jquery 动态绑定它。我可以访问像 55,56,57,58 这样的 id ...我需要根据 id 为每个 div 添加图标类。

标签： jquery

Answer 1

你可以这样做：

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>

`

您还可以使用 divid和动态创建一个数组icon classname并动态添加该类。

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>

`

希望能帮助到你 ：）