Question

我正在尝试使用以下代码构建动态jquery选择器：

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

其中segment_3是我从url字符串中成功检索的值，例如，它可能返回“section_one”的值

但是在尝试创建变量num_children时，此引用不起作用。如何构建代码以构建动态引用？谢谢你的帮助。

Answer 1

假设var section_id ='section_1'这个：

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

会给你

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

是的，这也是有效的。它会在＃section_1元素中提供所有ul元素（无论它们有多深）。可能你会获得一系列元素并且调用.children（）就可以了。它应该都可以。

Answer 2

对于HTML 4.01，id属性对于允许的值字符（命名规则）非常有限：

id属性必须以字母开头 A-Z或a-z，后跟：字母（A-Za-z），数字（0-9），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）和所有值都是区分大小写的。

*注意：根据我的经验，我发现只使用小写字符和_用于id，这使得它们非常清晰，并且它们脱离了CSS选择器（.something：pseudo-class）*

另一方面，在HTML5中，您几乎可以获得任何ID值。

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

所以你的选择器完全正确（有效）与HTML5规范，但为了使它与jQuery一起工作，你需要转义选择器解析器使用的所有字符具有特殊含义。而且因为它的JavaScript代码，你必须使用两个\\（第一个逃脱第二个）。 JQuery没有为您提供这样做的方法，所以下面是我正在使用的代码：

示例：

<?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>

我编辑了代码，修复了一些错误。：）

Answer 3

尝试

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

Answer 4

上面的评论是正确的... id选择器的基本语法是$（＃itemID）...

var myValue = $（“＃new_grouping _”+ i）.val（）; //这个有用吗

在jquery选择器中使用变量

4 个答案: