¿Cómo puedo usar jquery o css para asignar una clase a todos los elementos dentro de un div?
es decir esto es lo que tengo
<div class="nav"> <a href="">one</a> <a href="">two</a> </div>Pero esto es lo que quiero
<div class="nav"> <a href="" class="test">one</a> <a href="" class="test">two</a> </div>Usando la menor cantidad de código posible, de modo que cuando se cargue la página, los elementos en .nav tengan asignada la clase "prueba" y no tenga que asignarla en cada uno
Puedes lograr esto siguiendo el código
<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>Bastante simple en jQuery: $('div a').addClass('class');
O en JavaScript algo como esto:
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>