jquery：将黑色边框添加到特定长度的文本

Question

使用jquery如何在所有超过特定字符值（100）的“p”元素周围添加黑色边框？

Answer 1

试试这个：

$("p").filter(function(){ 
    return $(this).text().length > 100; 
}).css("border", "2px solid black"); 

Answer 2

看一看this fiddle。

它循环遍历所有p元素，并且如果内容的长度大于给定数量的字符，它会将该样式应用于该元素。

Answer 3

我想你应该增加一个类，而不是包含新的内联样式。我将使用addClass的回调签名来实现此目的。

我打算使用Sizzle text函数（可作为$.text），因为它的性能明显好于$(this).text()。

$('p').addClass(function() { 
    return $.text([this]).length > 100 ? 'long' : ''; 
}); 

然后，简单地定义一个p.long类与任何你想要的风格。

Answer 4

很多方法可以做到这一点： 方式一：

$('p').filter(function() { 
    return $(this).text().length > 100; 
}).addClass('biggie'); 

和CSS：

.biggie 
{ 
    border: 2px solid black; 
} 

另一种方式：

$('p').filter(function() { 
    return $(this).text().length > 100; 
}).css({ 
    'border': '2px solid black' 
}); 

另一种方式：

$('p').each(function() { 
    if ($(this).text().length > 100) $(this).css({ 
     'border': '2px solid black' 
    }); 
}); 

另一个问题：

$('p').each(function() { 
    if ($(this).text().length > 100) $(this).addClass('biggie'); 
}); 

一个加法：

$('p').addClass(function() { 
    return $(this).text().length > 100 ? 'long' : 'short'; 
});