通过setAttribute设置类时的JavaScript奇怪行为_Javascript_Css

通过setAttribute设置类时的JavaScript奇怪行为

javascript css

通过setAttribute设置类时的JavaScript奇怪行为,javascript,css,Javascript,Css,我想通过JS在我的html代码的某些行上设置一个特定的类。在输出中，我有四行，第1行、第2行和第4行（以阿拉伯语字符开头）应该会受到影响，并获得红色背景。但奇怪的是为什么第二线没有受到班级的影响。我做错什么了吗 <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>This is</title> <style> .rtl {bac

我想通过JS在我的html代码的某些行上设置一个特定的类。在输出中，我有四行，第1行、第2行和第4行（以阿拉伯语字符开头）应该会受到影响，并获得红色背景。但奇怪的是为什么第二线没有受到班级的影响。我做错什么了吗

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>This is</title>
<style> .rtl {background: red;}</style>
</head>


<body>

<div class="chat-item__text">سلام</div>

<div class="chat-item__text">بله</div>

<div class="chat-item__text">koo</div>

<div class="chat-item__text">اینور</div>

<script>


function checkRtl( character )
{
    var RTL = ['ا','ب','پ','ت','س','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];
    if( RTL.indexOf( character ) > -1)
    {
          return true;
    } else
    {
          return false;
    }

}

function init()
{
      var chatText = document.getElementsByClassName("chat-item__text");
      for (var i = 0; i < chatText.length; i++)
      {
            var eachLine = chatText[i].innerHTML;
            var firstChar = eachLine.charAt(0);
            console.log(firstChar);
            if (checkRtl(firstChar))
            {
                  chatText[i].setAttribute("class", "rtl");
            }

      }
}
window.onload = init;
</script>
</body>
</html>


这是
.rtl{背景：红色；}
سلام
بله
辜
اینور
函数checkRtl（字符）
{
var RTL=[‘ا’、‘ب’、‘ت’、‘ج’、‘ج’、‘ذ’、‘ذ’、‘ش’、‘ش’、‘ض’、‘ط’、‘ع’、‘غ’、‘ف’、‘م’、‘و’、‘و’、‘و’、‘و’；
if（RTL.indexOf（字符）>-1）
{
返回true；
}否则
{
返回false；
}
}
函数init（）
{
var chatText=document.getElementsByClassName（“chat-item_uutext”）；
对于（变量i=0；i


提前感谢。
使用元素.classList.add（）
而不是setAttribute（）

发生了以下错误：
您使用的setAttribute
正在将类设置为新属性

函数检查RTL（字符）{
var RTL=[‘ا’、‘ب’、‘ت’、‘ج’、‘ج’、‘ذ’、‘ذ’、‘ش’、‘ش’、‘ض’、‘ط’、‘ع’、‘غ’、‘ف’、‘م’、‘و’、‘و’、‘و’、‘و’；
if（RTL.indexOf（字符）>-1）{
返回true；
}否则{
返回false；
}
}
函数init（）{
var chatText=document.getElementsByClassName（“chat-item_uutext”）；
对于（变量i=0；i

这是
.rtl{
背景：红色；
}
سلام
بله
辜
اینور
使用元素.classList.add（）
而不是setAttribute（）

发生了以下错误：
您使用的setAttribute
正在将类设置为新属性

函数检查RTL（字符）{
var RTL=[‘ا’、‘ب’、‘ت’、‘ج’、‘ج’、‘ذ’、‘ذ’、‘ش’、‘ش’、‘ض’、‘ط’、‘ع’、‘غ’、‘ف’、‘م’、‘و’、‘و’、‘و’、‘و’；
if（RTL.indexOf（字符）>-1）{
返回true；
}否则{
返回false；
}
}
函数init（）{
var chatText=document.getElementsByClassName（“chat-item_uutext”）；
对于（变量i=0；i

这是
.rtl{
背景：红色；
}
سلام
بله
辜
اینور

实时HTMLCollection
。术语Live可以解释为dynamic
，它在更新DOM
时更新
因此，在您的情况下，如果调试，for循环
只被迭代3次，因为setAttribute
将替换元素的类
，因此集合的长度
将受到影响（减少）
使用document.querySelectorAll
选择返回NodeList
且不是live的元素

函数检查RTL（字符）{
var RTL=[‘ا’、‘ب’、‘ت’、‘ج’、‘ج’、‘ذ’、‘ذ’、‘ش’、‘ش’、‘ض’、‘ط’、‘ع’、‘غ’、‘ف’、‘م’、‘و’、‘و’、‘و’、‘و’；
return RTL.indexOf（character）>-1；//可以这样简化
}
函数init（）{
var chatText=document.queryselectoral（“.chat-item_uuutext”）；
对于（变量i=0；i
.rtl{
背景：红色；
}

بله
辜
اینوو
实时HTMLCollection
。术语Live可以解释为dynamic
，它在更新DOM
时更新
因此，在您的情况下，如果调试，for循环
只被迭代3次，因为setAttribute
将替换元素的类
，因此集合的长度
将受到影响（减少）
使用document.querySelectorAll
选择返回NodeList
且不是live的元素

函数检查RTL（字符）{
var RTL=[‘ا’、‘ب’、‘ت’、‘ج’、‘ج’、‘ذ’、‘ذ’、‘ش’、‘ش’、‘ض’、‘ط’、‘ع’、‘غ’、‘ف’、‘م’、‘و’、‘و’、‘و’、‘و’；
return RTL.indexOf（character）>-1；//可以这样简化
}
函数init（）{
var chatText=document.queryselectoral（“.chat-item_uuutext”）；
对于（变量i=0；i
<代码