jquery计数字符和添加类不工作

我有一些JavaScript，我在这里找到，但我似乎无法得到它的工作。jquery计数字符和添加类不工作

我有一个id为'latest'的h1，如果少于21个字符，应该有class 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>

来源

2015-04-17 Ben H

它不是'h1'与'id'，这是'class'。 – KBN

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

这将返回包含匹配节点列表一个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>

您必须遍历节点列表，并检查长度

来源

2015-04-17 10:05:02 mohamedrias

错误。它会返回一个'jQuery'集合。 'document.querySelectorAll（'h1.latest'）'将返回一个'NodeList'。 – VisioN

哦，这是一个包含匹配节点列表元素的jQuery对象 – mohamedrias

我看到它在运行代码片段中工作时，无论何时添加到站点都不起作用。这里是一个链接到网站：http://alturl.com/ria2w它是最新的新闻部分，3盒。你会看到1有一行文字，而两行有双行标题。我正试图影响较短的单行。 –

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

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

Fiddle

来源

2015-04-17 10:08:10

按照jQuery的文档，你可以看到.addClasss()方法接受一个函数作为回调，你可以从它返回的值。所以不要在每个h1.latest上进行循环，而只需返回要添加的类。

试试这个：

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

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

<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>

来源

2015-04-17 10:11:38 Jai

jquery计数字符和添加类不工作

回答

相关问题