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'; 
});