I have the following structure:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<p>primer estudiante: <span id="primer_estudiante"></span></p>
<p>primer profesor: <span id="primer_profesor"></span></p>
<p>primer egresado: <span id="primer_egresado"></span></p>
<div class="container-fluid">
<div class="row">
<div class="col-3" id="estudiantes">
<div class="card">
<div class="card-body">
<p class="nombre">JUAN</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">MARIA</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">LUIS</p>
</div>
</div>
</div>
<div class="col-3" id="profesores">
<div class="card">
<div class="card-body">
<p class="nombre">LOPEZ</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">DIAZ</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">BUSTOS</p>
</div>
</div>
</div>
<div class="col-3" id="egresados">
<div class="card">
<div class="card-body">
<p class="nombre">ANDRES</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">LAURA</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="nombre">ANA</p>
</div>
</div>
</div>
</div>
</div>
What I want is that with javascript, be it vanilla or jquery, it is completed at the top (inside the <span>
) with the values of the first result of each column.
Unfortunately I don't know how to select them when the elements have the same structure, I suppose that the id can help me to differentiate each column, with CSS it would be something like this
#estudiantes > p.nombre {
/* estilos */
}
$(document).ready(function(){
$("#estudiantes > p.nombre:first").css("background-color", "yellow");
});