Question

例如，我有以下html：

<ul>
       <li>1</li>
       <li>2</li>
       <ul>
          <li>1</li>
           <ul>
               <li>1</li>
               <li>2</li>
           </ul>
           <li>2</li>
       </ul>
   </ul>
   <ul>
       <li>1</li>
       <li>2</li>
   </ul>
   <ul>`enter code here`
       <li>1</li>
       <li>2</li>
</ul>

而且，我只想设置值<1> 的 li 元素。我在jQuery中试过这个并且它可以工作，但是我想知道是否有更好的方法来实现它。

我的方法：

$("ul li").each(
   function(){
       if($(this).text() == "1"){
           $(this).css("color","red");
       }
   });

Answer 1

您可以使用:contains()

$("ul li:contains('1')").css("color","red");

fiddle

如果您的li个元素的值不是1或2，则可以使用jquery .filter()

$("ul li").filter(
    function(){
        return $(this).text() == 1;
    }).css("color","red");

fiddle

Answer 2

您还可以使用css方法：

$('li').css('color', function(_, currentColor) {
    return $.trim(this.textContent) === '1' ? 'red' : null;
});

来自jQuery .css()的文档：

注意：如果setter函数中没有返回任何内容（即。function( index, style ){}），或者返回undefined，则不会更改当前值。仅在满足某些条件时才有选择地设置值。

Answer 3

如果您只有1和2，则可以使用以下

$("li:contains(1)").css("color","red");

如果内容为li，则会包含21。

在无序列表<ul> </ul> </li>中设置特定<li>元素的样式

3 个答案: