在无序列表<ul>中，如何样式化特定的<li>元素？

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>

"我想仅为 value = 1 的 li 元素设置样式。我在 jQuery 中尝试了这个方法，它有效，但我想知道是否有更好的方法来实现这个目标。"

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

- user3476286

---

<li data-value=1>1</li>，然后是 CSS - Moshe L

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");

{{链接1:小提琴}}

- Alex Char

---

如果该文本是10，则这也符合条件。 - Ben

是的，我有值为“1”或“2”，它可以正常工作。谢谢！ - user3476286

Answer 2

您可以使用css方法：

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

来自jQuery.css()的文档:

注意: 如果在setter函数中没有返回任何值(即 function( index, style ){} )，或者返回了undefined，则当前值不会被改变。这对于只在满足特定条件时选择性地设置值非常有用。

- Ram

Answer 3

如果您只有 1 和 2，您可以使用以下方法：

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

如果内容是21，那么它将包含一个li标签。

- Mritunjay