javascript - jquery 计算字符数并添加类不起作用

Question

我在这里找到了一些 javascript，但我似乎无法让它工作。

我有一个 id 为“latest”的 h1，如果少于 21 个字符，它应该具有 pt45 类。

// The number of characters
    var yourElement = $('h1.latest');
    var charLength = yourElement.text().length;
    if(charLength < 20){
       yourElement.addClass('pt45');
    }

.pt45 {
    font-size: 10px;
    color:red;
}

<h1 class="latest">123456789</h1>
<h1 class="latest">123456789123456789123456789123456789</h1>

Answer 1

  var yourElement = $('h1.latest');

这将返回一个包含匹配 NodeList 的 jQuery 对象。

yourElement.text().length; 会给出两个，因为你有两个 h1

相反，它必须是:

 jQuery("h1.latest").each(function() {
    if(jQuery(this).text().length < 21 ) {
       jQuery(this).addClass("pt45")
    }
 });

.pt45 {
    font-size: 10px;
    color:red;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


<h1 class="latest">123456789</h1>
<h1 class="latest">123456789123456789123456789123456789</h1>

您必须迭代节点列表并检查长度