I'm trying to build a dynamic jquery selector with the following code:
var section_id = "{segment_3}";
var num_children = $('#'+ section_id + ' ul').children().size();
where segment_3 is a value I successfully retrieve from the url string, which, for example, might return the value of "section_one"
But when trying to create the variable num_children, this reference doesn't work. How do I construct the code to build a dynamic reference? Thanks for any help.
Assuming var section_id = 'section_1' this:
$('#'+ section_id + ' ul').children().size();
will give you
$('#section_1 ul').children().size();
and yes, this is valid as well. It will give you all ul elements within #section_1 element (no matter how deep they would be). Probably you'll get array of elements and calling .children() on it is also fine. It should all work.
Up to HTML 4.01 the id attribute is very restricted regarding the allowed value characters (naming rules):
id attribute must begin with a letter A-Z or a-z, followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".") and all values are case-sensitive.
*note: in my experience I found using only lowercase chars and _ for id's makes them very clear and they stand out of CSS selectors (.something:pseudo-class)*
On the other hand in HTML5 you can have almost anything as id's value.
Ref: http://www.w3.org/TR/html5/elements.html#the-id-attribute
So your selector is perfectly fine (valid) with HTML5 specs but in order to get it to work with jQuery you need to escape all characters the selector parser uses with special meaning. And because its JavaScript code, you have to use two \\ (the first one escapes the second one). JQuery does not offer you a way to do this, so below is the code I am using:
Example:
<?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>
I edited the code, few mistakes where fixed. :)
Try
var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();