我正在尝试创建一个 jQuery 函数来计算每个 anchor 标记的字符长度,并在字符计数大于“5”时应用一个类。此外,如果字符数大于 7 (4 + 3),则应用不同的类别。
这就是我到达的地方(JSFIDDLE:http://jsfiddle.net/2mg3q/):
HTML
<div id="global-nav">
<ul id="nav">
<li><a href="#">One</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item with11</a></li>
<li><a href="#">One</a></li>
</ul>
</div>
CSS
#nav{
list-style:none;
margin:0;
padding:0;
}
#nav li a{
display:block;
padding:5px;
border:1px solid #ccc;
}
#nav li a.TEST1{
border-color:red;
}
#nav li a.TEST2{
border-color:blue;
}
JS
var navChars = 4;
$('#global-nav #nav li a').filter(function() {
if($(this).text().length > navChars){
$('#global-nav #nav li a').addClass('TEST1');
}else if($(this).text().length > navChars + 3){
$('#global-nav #nav li a').addClass('TEST2');
}
});
如果没有“else”语句,TEST1 和 TEST2 类都会应用于 anchor 标记。使用 else 语句,仅 TEST1 应用于 anchor 标记。
我使用的原始 JS 和我基于上面的内容在单一条件下工作得很好,但现在我需要适应至少 2 个可能的字符长度。
我修改过的原始 JS(已破解):
var navChars = 13;
$('#global-nav #nav li a').filter(function() {
return $(this).text().length > navChars;
}).addClass('navMultiLine');
最佳答案
替换
<div id="#global-nav">
与
<div id="global-nav">
尝试:
$('#global-nav #nav li').each(function() {
var len = $(this).find("a").text().length;
if(len > 7){
$(this).find("a").addClass("TEST2");
}
else if(len > 4){
$(this).find("a").addClass("TEST1");
}
});
关于javascript - 基于字符计数的 if/else 条件 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20345070/