Javascript Jquery检查i标记是否有类并替换它

我有以下html结构：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third, class"></i><span>Third, class</span</li>
    <li><i id="icon-changer" class="Four class"></i><span>Four class</span></li>
</ul>

以下是如何生成我的html：

   foreach($targetValues as $_target) :?>
     <ul class="list-inline recommended-logo">

     <li><i id="icon-changer" class="<?php echo $_target ?>"></i><span><?php echo $_target ?></span></li>
     </ul>
    <?php endforeach;

foreach（$targetValues作为$u目标）：？>

首先，确保您的类名没有空格。
class=“ab”
中的空格实际上表示两个独立的类，即a和b，而不是类“ab”。正如其他人提到的，ID应该是唯一的。因此，对于代码：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer-1" class="first_class"></i><span>First class</span></li>
    <li><i id="icon-changer-2" class="second_class"></i><span>Second class</span></li>
    <li><i id="icon-changer-3" class="third_class"></i><span>Third, class</span</li>
   <li><i id="icon-changer-4" class="fourth_class"></i><span>Four class</span></li>
</ul>

将以“头等舱”取代“五等舱”

我坚持上面列出的我的原始代码。但看看对问题的编辑，问题显然是在重复ID时使用jQuery在ID上选择-第一个So忽略ID并基于类进行选择-也就是说，对每个removeClass/addClass函数调用使用
$（'.first'）
$（'.Second'）
等$如果ID不是唯一的，（“#…”将无法按预期工作。
更新：：
你可以尝试一些同等的方法：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third class"></i><span>Third, class</span></li>
    <li><i id="icon-changer" class="Fourth class"></i><span>Four class</span></li>
</ul>

<script>
   var arr = [{class:'First.class',id:'first'},{class:'Second.class',id:'second'},{class:'Third.class',id:'third'},{class:'Fourth.class',id:'fourth'}]
   for(var i=0;i<arr.length;++i){
    $(`.${arr[i].class}`).parent().find('span').text(`${arr[i].id}`)
//Or if what you need is to change the class name to the name of the id
//$(`.${arr[i].class}`).removeClass().toggleClass(`icon-${arr[i].id}`)
   }
</script>


头等舱
二等舱
第三类
四级

var arr=[{class:'First.class'，id:'First'}，{class:'Second.class'，id:'Second'}，{class:'Third.class'，id:'Third'}，{class:'Fourth.class'，id:'Fourth'}]
对于（var i=0；iFind
$（“.class”）.length
为什么要重用ID？为什么不为所有
元素使用公共类？您尝试了什么？您已经命名了两个步骤：“检查元素是否有类”、“替换元素的类”（等等）。完成这两个步骤的具体步骤是什么？特别是，当您尝试与这些元素交互时，这将导致和CSS出现问题。您可以使用
.hasClass（）
您之前有一些问题，您的代码会按类选择并更改文本内容，那么这里有什么问题？请查看我的类，带空格的文本及其外观必须替换，我无法更改默认值classes@RobertD-我不太清楚你在说什么。为什么不能更改默认类？你可以在页面上运行jQuery，但不能更改HTML？？？我编辑了我的文章，你可以在foreach中查看，了解我不能更改的内容classes@RobertD-那个PHP代码真的是一团糟。你不应该在循环中使用静态ID-这保证了重复ID，这是一个真正的问题。我不能更改类，但是html必须保持完整更新，但没有任何区别。应该仍然是您需要的吗？但是您在这里更改了id？我需要用icon-class1替换第一个类，例如，在JSFIDLE中运行代码，您可以看到id被更改为表示classI需要更改类内的文本而不是id，只有第一个类使用icon-c套路1
$('.first_class').removeClass('first_class').addClass('fifth_class')

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third class"></i><span>Third, class</span></li>
    <li><i id="icon-changer" class="Fourth class"></i><span>Four class</span></li>
</ul>

<script>
   var arr = [{class:'First.class',id:'first'},{class:'Second.class',id:'second'},{class:'Third.class',id:'third'},{class:'Fourth.class',id:'fourth'}]
   for(var i=0;i<arr.length;++i){
    $(`.${arr[i].class}`).parent().find('span').text(`${arr[i].id}`)
//Or if what you need is to change the class name to the name of the id
//$(`.${arr[i].class}`).removeClass().toggleClass(`icon-${arr[i].id}`)
   }
</script>