Volver al Programación / Codificación foro

jQuery por cuestión de bucle

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Octubre 15th, 2011, 2:52 pm

Im intentando configurar de forma que puedo personalizar el aspecto de un menú desplegable. Im limitado en lo que puedo hacer con css, así como Id ocultar el elemento "seleccionar" y en su lugar muestra una lista desordenada que funcionará de la misma manera:


iniciar con esto:
HTML Código: [ Select ]
<td>
   <select name="scope">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
</td>
 
  1. <td>
  2.    <select name="scope">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8. </td>
  9.  


usar javascript para hacer esto:
HTML Código: [ Select ]
<td>
   <select name="scope" style="display: none;">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
   <ul>
      <li>Days</li>
      <li>Weeks</li>
      <li>Months</li>
      <li>Years</li>
   </ul>
</td>
 
  1. <td>
  2.    <select name="scope" style="display: none;">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8.    <ul>
  9.       <li>Days</li>
  10.       <li>Weeks</li>
  11.       <li>Months</li>
  12.       <li>Years</li>
  13.    </ul>
  14. </td>
  15.  


¿Qué Im recibiendo en su lugar es el siguiente:
HTML Código: [ Select ]
<td>
   <select name="scope" style="display: none;">
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
      <option value="months">Months</option>
      <option value="years">Years</option>
   </select>
   <ul>
      <li>Days</li>
      <li></li>
      <li>Weeks</li>
      <li></li>
      <li>Months</li>
      <li></li>
      <li>Years</li>
      <li></li>
   </ul>
</td>
 
  1. <td>
  2.    <select name="scope" style="display: none;">
  3.       <option value="days">Days</option>
  4.       <option value="weeks">Weeks</option>
  5.       <option value="months">Months</option>
  6.       <option value="years">Years</option>
  7.    </select>
  8.    <ul>
  9.       <li>Days</li>
  10.       <li></li>
  11.       <li>Weeks</li>
  12.       <li></li>
  13.       <li>Months</li>
  14.       <li></li>
  15.       <li>Years</li>
  16.       <li></li>
  17.    </ul>
  18. </td>
  19.  


Heres la Im de código javascript mediante:
JAVASCRIPT Código: [ Select ]
 
$("select")
   .css({
      display  : "none",
   })
   .parent()
   .append( function(index, html) {
      var opts = $(this).children('select').children('option');
      var ar = "";
      for(i=0;i<opts.length;i++){
         ar = ar+"<li>"+$(opts[i]).text()+"<li>";
      }
      ar = "<ul>"+ar+"</ul>";
      return ar;
   })
   .children("select")
   .children('option')
   .first()
   .attr("selected","selected");
 
  1.  
  2. $("select")
  3.    .css({
  4.       display  : "none",
  5.    })
  6.    .parent()
  7.    .append( function(index, html) {
  8.       var opts = $(this).children('select').children('option');
  9.       var ar = "";
  10.       for(i=0;i<opts.length;i++){
  11.          ar = ar+"<li>"+$(opts[i]).text()+"<li>";
  12.       }
  13.       ar = "<ul>"+ar+"</ul>";
  14.       return ar;
  15.    })
  16.    .children("select")
  17.    .children('option')
  18.    .first()
  19.    .attr("selected","selected");
  20.  


Me doy cuenta no es el código más limpio del mundo...javascript no es mi fuerte de traje. Im seguro que la cantidad de selectores y salto de DOM Im haciendo hará personas mortifican...pero Id quisiera saber dónde Im va mal con mi bucle for. ¿Por qué estoy recibiendo elementos de la lista vacíos adicional?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Octubre 15th, 2011, 2:52 pm

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Octubre 15th, 2011, 3:55 pm

He encontrado una solución utilizando el método jQuery.each en lugar de un bucle for. ¿Se ve algo desordenado, cómo serían ustedes limpieza?

JAVASCRIPT Código: [ Select ]
$("select").each(function(index, element) {
   $(this).after("<ul>").after( function() {
     
      var opts = $(this).children('option');
     
      opts.each(function(){
         $(this).parent().parent().children("ul").first().append("<li>"+$(this).text()+"</li>");
         console.log(this);
      });
   })
   .children("select")
   .children('option')
   .first()
   .attr("selected","selected");
});
 
  1. $("select").each(function(index, element) {
  2.    $(this).after("<ul>").after( function() {
  3.      
  4.       var opts = $(this).children('option');
  5.      
  6.       opts.each(function(){
  7.          $(this).parent().parent().children("ul").first().append("<li>"+$(this).text()+"</li>");
  8.          console.log(this);
  9.       });
  10.    })
  11.    .children("select")
  12.    .children('option')
  13.    .first()
  14.    .attr("selected","selected");
  15. });
  16.  
Use your words like arrows to shoot toward your goal.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Octubre 16th, 2011, 9:50 am

En su primer puesto había esta línea causando los elementos li adicionales:

Código: [ Select ]
ar = ar+"<li>"+$(opts[i]).text()+"<li>";


El segundo elemento li no hay un cierre li, olvidó su / . Eso es todo el problema fue que creo:)
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Octubre 16th, 2011, 3:32 pm

Señor, es un caballero y un erudito. Gracias.
Use your words like arrows to shoot toward your goal.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 4 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 111 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC