Question

我想使用链接jquery的函数。

例如我有一个ul元素。如果该元素的内容长度为4，我想更改背景颜色。

<ul>
    <li>eggs</li> //4 length 
    <li>bacon</li> 
    <li>ham</li>
    <li>cheese</li>
    <li>juice</li>
    <li>sausage</li>
</ul>

是否可以使用链接来检查内容长度？

我知道有一个each()功能。我不想用它。

var li_s = $('li');

li_s
        .???.length == 4 // I don't know how to check element's length
        .css("background","#ddd")
        .end();

Answer 1

尝试在此背景下使用.filter()，

$('li').filter(function(){
  return this.textContent.length > 4
}).css("background","#ddd");

这将过滤内容长度大于li的{{1}}元素。

Answer 2

尝试：

$('li').filter(function() {
    return $(this).text().length === 4;
}).addClass('foo')

.foo {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>eggs</li> //4 length
    <li>bacon</li>
    <li>ham</li>
    <li>cheese</li>
    <li>juice</li>
    <li>sausage</li>
</ul>

Answer 3

您可以使用filter并检查文本的长度。

var li_s = $('li');
li_s.filter( function () {  
    return $(this).text().length===4; 
} ).css("background-color","#ddd");

Answer 4

您可以使用以下css()方法。

$('ul li').css('background-color', function () {
    if ($(this).text().length == 4) {
        return '#ddd'
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>eggs</li> 
    <li>bacon</li> 
    <li>ham</li>
    <li>cheese</li>
    <li>juice</li>
    <li>sausage</li>
</ul>

如何使用链接和检查内容长度

4 个答案: