如何通过 Javascript 或 Jquery 为 ul 标签的 li 标签着色？
[英]How to color text a li tag of the ul tag by Javascript or Jquery?
问题描述
I'm new at Javascript.
我是 Javascript 的新手。 I have the following code html:我有以下代码 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>
How to color the text for each last li tag in the ul tags below?如何为下面 ul 标签中每个最后一个 li 标签的文本着色？ I was thinking of setting id for each li tag then using getElementById() method but that is quite wordy.我正在考虑为每个 li 标签设置 id 然后使用 getElementById() 方法，但这很罗嗦。 Is there any other way without changing the structure of the html code?在不改变 html 代码结构的情况下，有没有其他方法？ Can use Jquery but I don't know much about it.可以使用 Jquery 但我不太了解。
Thanks for your help.谢谢你的帮助。
6 个解决方案
解决方案1
1 2020-08-21 05:37:49
<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>
解决方案2
0 2020-08-21 05:21:17
You can achieve that through CSS, using:last-child您可以通过 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> in js also you can achive it like below:在 js 中你也可以像下面这样实现它：
window.addEventListener('load',()=>{
document.querySelectorAll('li:last-child').forEach((elem)=>{elem.style.color='red'});
});
解决方案3
0 已采纳 2020-08-21 05:24:06
Try this instead,试试这个，
Get last child (li) of every li document.querySelectorAll("ul li:last-child")获取每个 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>
解决方案4
0 2020-08-21 05:26:11
use element selector and last child selector:使用元素选择器和最后一个子选择器：
it selects all the last li in ul: find the below example它选择 ul 中的所有最后一个 li：找到下面的示例
ul > li:last-child{ color:red; }
解决方案5
0 2020-08-21 05:30:32
Hi Please have a look you don't need to repeat loop it's just simple you can add css.嗨，请看一下您不需要重复循环，很简单，您可以添加 css。
Thanks谢谢
$(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"
})
解决方案6
0 2020-08-21 05:42:29
As stated by everyone - you do not need javascript or jquery for this - but in the name of learning - here is a jquery way正如大家所说 - 你不需要 javascript 或 jquery 为此 - 但以学习的名义 - 这是一个 jquery 方式
Iterate over each of the uls - find the li's within and select the last one... then add a class - and the styling is on the class.遍历每个 uls - 找到 li 的内部和 select 最后一个......然后添加 class - 并且样式在 class 上。 It isalways better to add a class with styling - rather than using jquery to add css directly.添加带有样式的 class 总是比使用 jquery 直接添加 css 更好。
But as noted - I would definitely usee CSS only - and use the:last-child pseudo-selector as described by other solutions.但如前所述 - 我肯定会仅使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.