Question

我有一些我在这里找到的JavaScript，但我似乎无法让它工作。

我有一个带有id＆＃39;最新版本的h1＆＃39;如果少于21个字符，则应该具有类pt45。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

相反，它必须是：

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


<h1 class="latest">123456789</h1>
<h1 class="latest">123456789123456789123456789123456789</h1>

＆＃13;

您必须迭代Nodelist并检查长度

Answer 2

$('h1.latest')该对象选择具有类latest的所有h1元素。使用$(this)进行当前对象选择，并在每个循环中使用itreate

$('h1.latest').each(function() {
    if($(this).text().length < 20){
        $(this).addClass('pt45')
    }
});

Fiddle

Answer 3

根据jquery文档，您可以看到.addClasss()方法可以将函数作为回调函数，您可以从中返回值。所以不要在每个h1.latest上循环，而只返回要添加的类。

试试这个：

＆＃13;

$('h1.latest').addClass(function() {
   return this.textContent.length < 20 ? "pt45" : "";
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="latest">123456789</h1>
<h1 class="latest">123456789123456789123456789123456789</h1>

＆＃13;

jquery计算字符和addclass不工作

3 个答案: