using variables within a jquery selector_问答_开发者

using variables within a jquery selector

开发者 https://www.devze.com 2023-02-07 08:09 出处：网络

开发者_如何学PythonI\'m trying to build a dynamic jquery selector with the following code: var section_id = \"{segment_3}\";

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();

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

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

using variables within a jquery selector

精彩评论

关注公众号

热门标签

图文推荐

using variables within a jquery selector

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：