Estoy tratando de construir un selector jquery dinámico con el siguiente código:
var section_id = "{segment_3}"; var num_children = $('#'+ section_id + ' ul').children().size();donde segmento_3 es un valor que recupero con éxito de la cadena de URL, que, por ejemplo, podría devolver el valor de "sección_uno"
Pero al intentar crear la variable num_children, esta referencia no funciona. ¿Cómo construyo el código para construir una referencia dinámica? Gracias por cualquier ayuda.
Asumiendo var section_id = 'section_1' esto:
$('#'+ section_id + ' ul').children().size();Te regalaré
$('#section_1 ul').children().size();y sí, esto también es válido. Le dará todos los elementos ul dentro del elemento #section_1 (sin importar cuán profundos sean). Probablemente obtendrá una variedad de elementos y llamar a .children() también está bien. Todo debería funcionar.
Hasta HTML 4.01, el atributo id está muy restringido con respecto a los caracteres de valor permitidos (reglas de nomenclatura):
El atributo id debe comenzar con una letra AZ o az, seguido de: letras (A-Za-z), dígitos (0-9), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".") y todos los valores distinguen entre mayúsculas y minúsculas.
*nota: en mi experiencia, descubrí que solo se usan caracteres en minúsculas y _ para los identificadores los hace muy claros y se destacan de los selectores de CSS (.algo:pseudoclase)*
Por otro lado, en HTML5 puede tener casi cualquier cosa como valor de identificación.
Ref: http://www.w3.org/TR/html5/elements.html#the-id-attribute
Por lo tanto, su selector está perfectamente bien (válido) con las especificaciones de HTML5, pero para que funcione con jQuery, debe escapar de todos los caracteres que usa el analizador del selector con un significado especial. Y debido a que es código JavaScript, debe usar dos \\ (el primero escapa al segundo). JQuery no le ofrece una forma de hacer esto, por lo que a continuación se muestra el código que estoy usando:
Ejemplo:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>jQuery HTML5 Selector Escaping</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> // Ths is the list of special characters used by jquery selector parser // !"#$%&'()*+,./:;?@[\]^`{|}~ $(document).ready(function() { var selector = '{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}'; selector = selector.replace(/([ {}\|`\^@\?%#;&,.+*~\':"!^$[\]()=>|\/])/g,'\\$1'); var object = $('#'+selector+' ul').children().size(); alert('UL has '+ object +' LIs'); }); </script> </head> <body> <div id="{my_%real{ly:s#tra`n[ge_i]d_n^@a|me>}"> <ul> <li>Sehr</li> <li>Gut</li> <li>Doh</li> </ul> </div> </body> </html>Edité el código, se corrigieron algunos errores. :)
Tratar
var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();