如何遍历列表并应用 jQuery 来更改类答案

【问题标题】：How to loop over list and apply jQuery to change class如何遍历列表并应用 jQuery 来更改类
【发布时间】：2020-10-07 14:09:42
【问题描述】：

我正在学习 JavaScript。在下面的例子中，我试图

遍历列表项以获取其原始类
改变它。（具有红色类的列表项将变为绿色类，反之反之）

我也想不断改变它以获得动画效果。如何将javascript和jQuery一起添加？

是否需要为每个列表项设置超时时间？

*<style>*
  .red{
        color:red;
    } 
    .green{
        color:green;
    }
*</style>*        




*<body>*
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>
*</body>*


*<script>*
  $(function()) {

    var myListElem = document.getElementsByClassName('li');

    $('li').each(function() {
    if(myListElem).hasClass("red"){           
     $(myListElem).addClass('green');
         }
    else{
        $(myListElem).addClass('red')
    }

    });  
*</script>*

【问题讨论】：

请编辑您的问题以添加一个有效的 sn-p（编辑并单击 [<>]） - 有许多不应该出现的错误，例如 if(myListElem).hasClass 不是有效的 javascript。
对于动画，使用 CSS 过渡：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/…。无需在自己的代码中进行任何计算。

标签： javascript jquery

【解决方案1】：

首先，li 不是一个类 - list-inline-item 是。其次，您不会尝试在$('li').each(function()... 此处迭代数组，因为$('li') 不是您获取元素的方式。第三，即使修复循环并添加重复 (setInterval()) 也不会给您动画，因为您只是添加类而不是删除它们。在您的示例中，当您检查 red 时，您只需添加 green 并得到 red green 作为结果类。总结所有所说的事情，这样的事情会做：

$(function() {

    var myListElem = document.getElementsByClassName('list-inline-item');
		setInterval(function(){
    for(let i = 0; i < myListElem.length; i++){
    let e = myListElem[i];
      if($(e).hasClass("red")){           
       $(e).addClass('green');
       $(e).removeClass('red');
           }
      else{
          $(e).removeClass('green');
          $(e).addClass('red');
      }
    }
	}, 3000);
  });

.red{
        color:red;
    } 
    .green{
        color:green;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline-mb-0 ">
          <li  class="list-inline-item header red">C </li>
          <li class="list-inline-item header green">O</li> 
          <li class="list-inline-item header red">O</li> 
          <li class="list-inline-item header green">L</li> 

</ul>

【讨论】：