Obtener el primer div hijo con JQUERY, Obtener el ultimo hijo de un div y Recorrer cada div hijo
En este post tratre de explicar como obtener el primer hijo de un div, el ultimo y recorrer todos los div hijo la verdad creo que hay muchas formas de poderlo hacer pero esta es la forma en que yo lo hago.
este es nuestro html:
<body>
<div id='container'>
<div class="green">first</div>
<div class="green">second</div>
<div class="green">third</div>
</div>
</body>
Obtener el Primer children de un div padre
es bastante sencillo div container es el padre de los div con clase green ahora bien para obtener el primer hijo de un div padre puedes hacer los siguiente:
var first = $('#container').children(':first-child').text();
alert('first child is: '+first);
explicacion:
seleccionamos el div padre: $('#container')
mostramos todos los hijo que posee con:children()
La funcion children le pasamos el para metro : :first-child
extraemo el texto que posee el div: text()
y con eso obtenemos el primer children de un div padre
=========================================
Obtener el ultimo children de un div padre
es bien parecido a los anterions solo cambio en una cosa:
var lastchilkd = $('#container').children(':last-child').text();
alert('Last child is: ' + lastchilkd);
explicacion:
seleccionamos el div padre: $('#container')
mostramos todos los hijo que posee con:children()
La funcion children le pasamos el para metro : :last-child
extraemo el texto que posee el div: text()
=================================================
Recorre todos los hijos de un padre
Para recorrer y tener el text de cada uno de los children hacemos uso de la funcion each de jquery de esta manera:
$('#container').children().each(function(){
alert('estamos en div: ' +$(this).text())
}),
veamos que hace este pequeño condigo:
obtenemos todos los children :
$('#container').children()
output:
<div class="green">first</div>
<div class="green">second</div>
<div class="green">third</div>
con la funcion each es como un for que va recorriendo cada uno de los div
esta es la sintaxis:
each(function(){ })
dentro de la funcion podemos obtener el valor actual en cada recorrido de esta manera:
$(this) //esta proporciona el div en el que esta si es el primero el primero , si es el segundo el segundo y asi sucesivamente.
estando adentro podemos obtener el texto del div de la siguieten form:
$(this).text()
outout:
first
second
third
y eso seria todo si tienen preguntas o dudas pueden dejar sus comentarios.
No comments:
Post a Comment