2011-01-27 15 views
15

que estoy tratando de construir un selector de jQuery dinámica con el siguiente código:utilizando variables dentro de un selector de jQuery

var section_id = "{segment_3}"; 
var num_children = $('#'+ section_id + ' ul').children().size(); 

donde segment_3 es un valor de recupero con éxito de la cadena de URL, que, por ejemplo, podría devuelve el valor de "section_one"

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.

+4

¿La identificación del elemento es realmente '{segment_3}'? Las llaves hacen que no sea válido. – lonesomeday

+0

¿Tu section_id var no contiene realmente llaves cuando estás usando esto? Eso causaría un problema. – CalebHC

+0

la variable {segment_3} es previamente analizada por el framework (code_igniter) antes de que se ejecute javascript, por lo que en realidad es solo una cadena. Descubrí que realmente funciona para hacer esto: var num_children = $ ('# {segment_3} ul'). Pero aun así, asumiendo que solo estaba diciendo algo como: var section_id = 'section_1', ¿sería válido el código anterior? ¿Puedes construir un selector así? – mheavers

Respuesta

35

Suponiendo SECTION_ID var = 'section_1' esto:

$('#'+ section_id + ' ul').children().size(); 

le dará

$('#section_1 ul').children().size(); 

y sí, esto es válido también. Le dará todos los elementos ul dentro del elemento # section_1 (sin importar qué tan profundo sean). Probablemente obtendrá una matriz de elementos y llamar .children() también está bien. Debería funcionar todo.

+0

Horas y horas de lucha con las citas terminan en su respuesta. ¡Gracias! – viery365

0

Trate

var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size(); 
0

Los comentarios anteriores son correctas ... La sintaxis básica de un selector de la identificación es $ (#) ItemID ...

var myValue = $ ("# new_grouping _" + i) .val(); // esto funciona

1

Hasta HTML 4.01 el atributo id es muy restringido en cuanto a los personajes valor permitido (reglas de nomenclatura):

atributo id debe comenzar con una letra AZ o az, seguido de: cartas (A-Za-z), dígitos (0-9), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".") Y todos los valores son distingue entre mayúsculas y minúsculas.

* Nota: en mi experiencia he encontrado utilizando únicamente caracteres en minúsculas y _ para identificadores les hace muy claro y se destacan de los selectores CSS (.something: pseudo-clase) *

Por otra parte en HTML5 puede tener casi cualquier cosa como valor de identificación.

Ref: http://www.w3.org/TR/html5/elements.html#the-id-attribute

Así que su selector está perfectamente bien (válida) con especificaciones de HTML5, pero con el fin de conseguir que funcione con jQuery tiene que escapar todos los caracteres que el analizador selector utiliza con un significado especial. Y debido a su código JavaScript, debe usar dos \\ (el primero escapa al segundo). JQuery no le ofrece una manera de hacer esto, es abajo es el código que estoy utilizando:

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 
    // !"#$%&'()*+,./:;[email protected][\]^`{|}~ 
    $(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> 

he editado el código, algunos errores en caso de fijación. :)