仅为UL的第一个元素(JS或jquery）添加类的样式

Add style of class only for first element of UL (JS or jquery)

本文关键字：jquery 添加 样式 JS UL 第一个 元素 仅为      更新时间：2023-09-26

我有一个页面，其中ul显示在页面上，如下所示：

<ul>
    <li style="width: 158px;">A</li>
    <li style="width: 158px;">B</li>
    <li style="width: 158px;">C</li>
</ul>

我可以只为第一个元素A添加样式边界或类吗(使用JS或jQuery或任何其他框架(？

如果您更喜欢CSS:

ul li:first-child {
    border: solid 1px red;
}

如果您喜欢JavaScript:

document.querySelectorAll('li')[0].style.border = '1px solid red';

如果您更喜欢jQuery:

$('ul li').first().css('border', '1px solid red');

使用jQuery将类添加到<ul/> 的第一个元素

$(document).ready(function(){
    $('ul li:first').addClass('has-border');
});

演示：https://jsfiddle.net/e8pvj9hb/

这将针对首次出现的<li>并对其应用边界。

document.querySelectorAll('li')[0].style.border = '1px solid #ccc';

如果只想将第一个<li>作为特定类的目标，可以将('li')更改为类似('li.someClass')的内容，并在要作为目标的元素上放置一个类。

如果您还希望以所有li元素为目标，请使用类似的方法。

document.querySelectorAll('li').forEach(function(x) { x.style.border = '1px solid #ccc'; })

相关文章：