选择/编辑div中的所有子元素

如何使用jquery或css将.class分配给div中的所有元素？

也就是说，这就是我的

<div class="nav">
<a href="">one</a>
<a href="">two</a>
</div>

但这就是我想要的

<div class="nav">
<a href="" class="test">one</a>
<a href="" class="test">two</a>
</div>

使用尽可能少的代码，以便在加载页面时，.nav中的元素具有类"；测试"；分配给他们，我不必在每个中分配

您可以通过以下代码来实现这一点

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<a href="">one</a>
<a href="">two</a>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('div > a').addClass('test')
})
</script>
</html>

在jQuery中非常简单：$('div a').addClass('class');

或者在JavaScript中类似这样的东西：

let links = document.querySelectorAll("div a");
for(let link of links) {
link.classList.add("class");
}

.class {
text-decoration: none;
color: orange;
font-size: 50px;
margin-right: 100px;
}

<div class="nav">
<a href="">one</a>
<a href="">two</a>
</div>

$(document).ready(function() { $('.nav a').each(function(){ $(this).addClass("Test"); }) });

.Test{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav">
<a href="">one</a>
<a href="">two</a>
</div>

相关内容

最新更新

热门标签：