Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Como seleccionar elementos hijos?

JQuery - Como seleccionar elementos hijos?

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Como seleccionar elementos hijos?

Publicado por riztak (5 intervenciones) el 05/04/2016 16:48:30
Hola,

Tengo la siguente lista menu HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id='cssmenu'>
<ul>
<!-- EQUIPOS-->
   <li><a href='Equipos.html' id="equipos" target="central"><span>Equipos</span></a>
   <ul id="equiposUL">
 
         <li class='has-sub'><a href='#'><span>Introduccion</span></a><!--primer -->
            <ul id="equipos1">
               <li><a href='#'><span>Documentos</span></a></li>
            </ul>
         </li>
 
         <li class='has-sub'><a href='#' id="visualitzación"><span>Visualizacion</span></a><!-- primer-->
            <ul id="equipos2">
               <li><a href='#' ><span>Documentación</span></a></li>
               <li><a href='#'><span>Training</span></a></li>
               <li class='last'><a href='#'><span>Meeting</span></a></li>
            </ul>
         </li>
      </ul>
    </li>
</ul>
</div>

- Lo que pretendo es recorrer toda la lista y obtener primero los hijos de "equiposUL" que en este caso obtengo : Introduccion i | Visualizacion, esto por suerte me lo obtiene bien mediante jquery.

- En segundo lugar lo que quiero es apartir de estos dos elemntos obtenidos , obtener sus hijos es decir por ejemplo , apartir de "introduccion" obtener Documentos i apartir de Visualizacion obtener :

Docuemnatcion
Training
Meeting

La idea de todo esto es, guardar en una array la estructura de esta lista.
el codigo jquery que estoy empleando es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
 
var equipos=$('#equiposUL >li > a ');
var contenidorT1=new Array();
 
equipos.each(function(index,element){
 
alert("element es: "+$(element).text()+" index es: "+index);
contenidorT1.push($(element).text());
 
})

Agradeceria cualquier ayuda o sugerencia para poder llevar-lo a cabo.

saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Como seleccionar elementos hijos?

Publicado por xve (673 intervenciones) el 05/04/2016 21:37:59
Hola Riztak, una manera sencilla, es indicar que te muestre todos los enlaces dentro del ul...

Reemplaza:
1
var equipos=$('#equiposUL >li > a');
por esto:
1
var equipos=$('#equiposUL a');

Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Como seleccionar elementos hijos?

Publicado por riztak (5 intervenciones) el 06/04/2016 10:30:20
Hola,

No porque lo q pretendo es guardar la estructura de la lista en una array o en una variable json, Es decir lo que a mi me interesa es obtener tal com se puede ver los hijos durectos de equiposUL,equipos1,equipos2 y guardar el texto que hay entre las etiquetas <span> con el orden o estructura de este menu en un objeto json o array. Quiero implementar un codigo que me sirva para el futuro pq esta lista puede cambiar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Como seleccionar elementos hijos?

Publicado por riztak (5 intervenciones) el 06/04/2016 16:12:46
He logrado esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<script src="../jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 
// lectura status barra de menu

var objEquipos={
 
   "menu" : {
 
               "Introducción" : {
 
                         },
 
               "Visualización"   : {
 
 
                        }
            }
 
 
};
 
var objTest={
 
   "menu" : {
 
               "Introducción" : {
 
                         },
 
               "Visualización"   : {
 
 
                        }
            }
 
 
};
 
var objForm={
 
   "menu" : {
 
               "Introducción" : {
 
                         },
 
               "Visualización"   : {
 
 
                        }
            }
 
 
};
 
var objDoc={
 
   "menu" : {
 
               "Introducción" : {
 
                         },
 
               "Visualización"   : {
 
 
                        }
            }
 
 
};
 
//var equipos=$('#equiposUL >li > a ');

var equipos1=$('#equipos1  a ');
var equipos2=$('#equipos2  a  ');
var test1=$('#test1  a ');
var test2=$('#test2  a  ');
var form1=$('#form1  a ');
var form2=$('#form2  a  ');
var doc1=$('#doc1  a ');
var doc2=$('#doc2  a  ');
 
 
 
//-----------equipos------------------

equipos1.each(function(index,element){
 
  subintro=$(element).text();
 
  objEquipos['menu']['Introducción']['sub_'+index]=subintro;
 
   });
 
equipos2.each(function(index,element){
 
  subvis=$(element).text();
 
  objEquipos['menu']['Visualización']['sub_'+index]=subvis;
 
   });
//---------test-------------------

test1.each(function(index,element){
 
  subintro=$(element).text();
 
  objTest['menu']['Introducción']['sub_'+index]=subintro;
 
   });
 
test2.each(function(index,element){
 
  subvis=$(element).text();
 
  objTest['menu']['Visualización']['sub_'+index]=subvis;
 
   });
//---------formacio-------------------

form1.each(function(index,element){
 
  subintro=$(element).text();
 
  objForm['menu']['Introducción']['sub_'+index]=subintro;
 
   });
 
form2.each(function(index,element){
 
  subvis=$(element).text();
 
  objForm['menu']['Visualización']['sub_'+index]=subvis;
 
   });
 
//---------documentacio-------------------

doc1.each(function(index,element){
 
  subintro=$(element).text();
 
  objDoc['menu']['Introducción']['sub_'+index]=subintro;
 
   });
 
doc2.each(function(index,element){
 
  subvis=$(element).text();
 
  objDoc['menu']['Visualización']['sub_'+index]=subvis;
 
   });
 
 
 
console.log(objEquipos);
console.log(objTest);
console.log(objForm);
console.log(objDoc);
 
 
});
</script>


el codigo "html" es el mismo que puse al principio , pero copiado 4 veces donde he modificado los "ids" de las etiquetas "<ul>".el codigo como veis es muy largo.Mi idea es tener 4 objetos json que me representen la estructura de la barra de menu de mi pagina. estos objetos json los pedire a partir de otra pagina llamada permisos.php, esta pagina distribuira en una tabla esta lista en forma de arbol, y la idea es que el usuario Administrador escoja las opciuones de menu que se podran ver o no. escogidas estas opciones para el usuario en question, cuando se logee se le cargara la pagina index.php que contendra la barra de menu modificada segun sus permisos, por este modivo necesito saber que estructura tiene mi barra de menu al cargar la pagina permisos.php.

Aqui os pongo dos listas las otras dos son lo mismo tal como dije y modificando ellos nombres de los ids respectivos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div id='cssmenu'>
<ul>
<!-- EQUIPOS-->
   <li><a href='Equipos.html' id="equipos" target="central"><span>Equipos</span></a>
   <ul id="equiposUL">
 
         <li class='has-sub'><a href='#'><span>Introduccion</span></a><!--primer -->
            <ul id="equipos1">
               <li><a href='#'><span>Documentos</span></a></li>
            </ul>
         </li>
 
         <li class='has-sub'><a href='#' id="visualitzación"><span>Visualizacion</span></a><!-- primer-->
            <ul id="equipos2">
               <li><a href='#' ><span>Documentación</span></a></li>
               <li><a href='#'><span>Training</span></a></li>
               <li class='last'><a href='#'><span>Meeting</span></a></li>
            </ul>
         </li>
      </ul>
    </li>
 
      </ul>
    </li>
 
 
 
<!-- TEST-->
   <li class='has-sub'><a href='Test.html' id="test" target="central"><span>Test</span></a>
   	<ul id="testUL">
         <li class='has-sub'><a href='#'><span>Introduccion</span></a>
            <ul id="test1">
               <li><a href='#'><span>Documentos</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#' id="visualitzacion"><span>Visualizacion</span></a>
            <ul id="test2">
               <li><a href='#' ><span>Documentación</span></a></li>
               <li><a href='#'><span>Training</span></a></li>
               <li class='last'><a href='#'><span>Meeting</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
 
   	</ul>
   </div>

Espero que me hayan entendido bien.

gracias de anetmano
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Como seleccionar elementos hijos?

Publicado por riztak (5 intervenciones) el 07/04/2016 15:39:24
alguien tiene alguna idea de como solucionarlo !!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar