javascript - val - utilizando variables dentro de un selector jQuery
jquery selector ends with (4)
Estoy tratando de construir un selector de jQuery dinámico con el siguiente código:
var section_id = "{segment_3}";
var num_children = $(''#''+ section_id + '' ul'').children().size();
donde segment_3 es un valor que recupero exitosamente de la cadena url, que, por ejemplo, podría devolver el valor de "section_one"
Pero cuando se intenta 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.
Hasta HTML 4.01, el atributo id está muy restringido en cuanto a los caracteres de valor permitido (reglas de denominación):
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 los puntos (".") y todos los valores distinguen entre mayúsculas y minúsculas.
* nota: en mi experiencia, encontré que usar solo caracteres en minúscula y _ para id los hace muy claros y se destacan de los selectores de CSS (.something: pseudo-class) *
Por otro lado, en HTML5 puedes tener casi cualquier cosa como valor de id.
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 necesita escapar de todos los caracteres que el analizador de selector usa con un significado especial. Y debido a su código JavaScript, tienes que usar dos // (el primero escapa al segundo). JQuery no te ofrece una forma de hacerlo, así que debajo está 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, algunos errores fueron corregidos. :)
Los comentarios anteriores son correctos ... la sintaxis básica para un selector de id es $ (# itemID) ...
var myValue = $ ("# new_grouping _" + i) .val (); // esto funciona
Suponiendo que 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 qué tan profundos sean). Probablemente obtendrás una gran variedad de elementos y llamar a .children () también está bien. Todo debería funcionar.
Tratar
var num_children = $(''#''+ section_id.substring(1, section_id.length-2) + '' ul'').children().size();