19

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.

mheavers
  • 29,530
  • 58
  • 194
  • 315
  • 4
    Is the element's ID really `{segment_3}`? The curly braces make it invalid. – lonesomeday Jan 27 '11 at 23:57
  • Your section_id var isn't really containing curly braces when you're using this? That would cause a problem. – CalebHC Jan 27 '11 at 23:58
  • the {segment_3} variable is pre-parsed by the framework (code_igniter) before the javascript executes - so it's really just a string. I discovered that it actually works to do this: var num_children = $('#{segment_3} ul') . But still, assuming I was just saying something like: var section_id = 'section_1' , would the code above be valid? Can you build a selector like that? – mheavers Jan 28 '11 at 00:16
  • The curly brace makes it invalid? Welcome to the world of SharePoint. Yes indeed, MS SharePoint renders tables using a curly brace'd GUID as an ID value. – Alan M May 08 '14 at 23:13

4 Answers4

41

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.

Kamil Sarna
  • 5,993
  • 1
  • 32
  • 22
1

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. :)

ludesign
  • 1,353
  • 7
  • 12
0

Try

var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();
Aliostad
  • 80,612
  • 21
  • 160
  • 208
0

The comments above are correct... the basic syntax for an id selector is $(#itemID)...

var myValue = $("#new_grouping_"+i).val(); // this works

John K.
  • 5,426
  • 1
  • 21
  • 20