Question

我想通过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>

提前致谢。

Answer 1

Document.getElementsByClassName()直播HTMLCollection。直播一词可以解释为dynamic，DOM更新后会更新。

因此，在您的情况下，如果您进行调试，则for-loop仅被3次迭代，因为setAttribute将替换该元素的class，因此{{1} length的{}会受到影响（减少）。

使用Collection选择返回document.querySelectorAll且不是实时

的元素

NodeList

function checkRtl(character) {
  var RTL = ['ا', 'ب', 'پ', 'ت', 'س', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی'];
  return RTL.indexOf(character) > -1; //Could be simplified like this
}

function init() {
  var chatText = document.querySelectorAll(".chat-item__text");
  for (var i = 0; i < chatText.length; i++) {
    var eachLine = chatText[i].innerHTML;
    var firstChar = eachLine.charAt(0);
    console.log(checkRtl(firstChar))
    if (checkRtl(firstChar)) {
      chatText[i].setAttribute("class", "rtl");
    }
  }
}
window.onload = init;

.rtl {
  background: red;
}

Fiddle Demo

注意：如果您想要多个课程，请使用<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>代替Element.classList.add()

Answer 2

使用Element.classList.add()代替setAttribute()。

发生了错误：

您使用setAttribute将类设置为新属性。

＆＃13;

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].classList.add('rtl');
      //chatText[i].setAttribute("class", "rtl");
    }

  }
}
window.onload = init;

＆＃13;

<!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>

</body>

</html>

＆＃13;

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

2 个答案:

Fiddle Demo