如何通過 Javascript 或 Jquery 為 ul 標簽的 li 標簽着色？

Question

我是 Javascript 的新手。 我有以下代碼 html：

<body>
    <ul id="a" class="list1">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <ul id="b" class="list2">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">      
  </script>
</body>

如何為下面 ul 標簽中每個最后一個 li 標簽的文本着色？ 我正在考慮為每個 li 標簽設置 id 然后使用 getElementById() 方法，但這很羅嗦。 在不改變 html 代碼結構的情況下，有沒有其他方法？ 可以使用 Jquery 但我不太了解。

謝謝你的幫助。

在此處輸入圖像描述

Answer 1

 <style> li:last-child{ color:red; } </style> <body> <ul id="a" class="list1"> <li>Coffee</li> <li class="liColorChanger">Tea</li> </ul> <ul id="b" class="list2"> <li>Coffee</li> <li class="liColorChanger">Tea</li> </ul> <script type="text/javascript"> </script> </body>

 <style>.liColorChanger { color:green; } </style> <body> <ul id="a" class="list1"> <li>Coffee</li> <li class="liColorChanger">Tea</li> </ul> <ul id="b" class="list2"> <li>Coffee</li> <li class="liColorChanger">Tea</li> </ul> <script type="text/javascript"> </script> </body>

Answer 2

您可以通過 CSS 實現，使用：last-child

 li:last-child{ color:red; }

 <ul id="a" class="list1"> <li>Coffee</li> <li>Tea</li> </ul> <ul id="b" class="list2"> <li>Coffee</li> <li>Tea</li> </ul>

在 js 中你也可以像下面這樣實現它：

window.addEventListener('load',()=>{
document.querySelectorAll('li:last-child').forEach((elem)=>{elem.style.color='red'});
});

Answer 3

試試這個，

獲取每個 li document.querySelectorAll("ul li:last-child")

 var secondli = document.querySelectorAll("ul li:last-child"); for(i=0;i<secondli.length;i++){ var li = secondli[i]; li.style.color = "red"; }

 <body> <ul id="a" class="list1"> <li>Coffee</li> <li>Tea</li> </ul> <ul id="b" class="list2"> <li>Coffee</li> <li>Tea</li> </ul> <script type="text/javascript"> </script> </body>

Answer 4

使用元素選擇器和最后一個子選擇器：

它選擇 ul 中的所有最后一個 li：找到下面的示例

ul > li:last-child{ color:red; }

Answer 5

嗨，請看一下您不需要重復循環，很簡單，您可以添加 css。

謝謝

$(document).ready(function(){
    var listA = document.querySelector("#a li:last-child");
  var listB = document.querySelector("#b li:last-child");
  listA.style.color = "red"
  listB.style.color = "red"
})

Answer 6

正如大家所說 - 你不需要 javascript 或 jquery 為此 - 但以學習的名義 - 這是一個 jquery 方式

遍歷每個 uls - 找到 li 的內部和 select 最后一個......然后添加 class - 並且樣式在 class 上。 添加帶有樣式的 class 總是比使用 jquery 直接添加 css 更好。

但如前所述 - 我肯定會僅使用 CSS - 並使用：last-child 偽選擇器，如其他解決方案所述。

 $(document).ready(function(){ $('ul').each(function(){ $(this).find('li').last().addClass('red'); }) })

 .red{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="a" class="list1"> <li>Coffee</li> <li>Tea</li> </ul> <ul id="b" class="list2"> <li>Coffee</li> <li>Tea</li> </ul>

如何通過 Javascript 或 Jquery 為 ul 標簽的 li 標簽着色？

問題描述

6 個解決方案

解決方案1
1 2020-08-21 05:37:49

解決方案2
0 2020-08-21 05:21:17

解決方案3
0 已采納 2020-08-21 05:24:06

解決方案4
0 2020-08-21 05:26:11

解決方案5
0 2020-08-21 05:30:32

解決方案6
0 2020-08-21 05:42:29

如何通過 Javascript 或 Jquery 為 ul 標簽的 li 標簽着色？

問題描述

6 個解決方案

解決方案1 1 2020-08-21 05:37:49

解決方案2 0 2020-08-21 05:21:17

解決方案3 0 已采納 2020-08-21 05:24:06

解決方案4 0 2020-08-21 05:26:11

解決方案5 0 2020-08-21 05:30:32

解決方案6 0 2020-08-21 05:42:29

解決方案1
1 2020-08-21 05:37:49

解決方案2
0 2020-08-21 05:21:17

解決方案3
0 已采納 2020-08-21 05:24:06

解決方案4
0 2020-08-21 05:26:11

解決方案5
0 2020-08-21 05:30:32

解決方案6
0 2020-08-21 05:42:29