在 jquery 选择器中使用变量答案

【问题标题】：using variables within a jquery selector在 jquery 选择器中使用变量
【发布时间】：2011-01-27 23:55:01
【问题描述】：

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

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

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

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

【问题讨论】：

元素的ID真的是{segment_3}吗？花括号使其无效。
当您使用它时，您的 section_id 变量实际上并没有包含花括号？这会导致问题。
{segment_3} 变量在 javascript 执行之前由框架 (code_igniter) 预先解析 - 所以它实际上只是一个字符串。我发现它实际上可以做到这一点： var num_children = $('#{segment_3} ul') 。但是，假设我只是说： var section_id = 'section_1' ，上面的代码是否有效？你能建立一个这样的选择器吗？
大括号使其无效？欢迎来到 SharePoint 的世界。确实，MS SharePoint 使用花括号 GUID 作为 ID 值呈现表格。

标签： javascript jquery variables dynamic selector

【解决方案1】：

假设 var section_id = 'section_1' 这个：

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

会给你

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

是的，这也是有效的。它将为您提供#section_1 元素中的所有 ul 元素（无论它们有多深）。可能你会得到元素数组并在其上调用 .children() 也可以。这一切都应该工作。

【讨论】：

数小时和数小时的报价最终会出现在您的答案中。谢谢！

【解决方案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>

我编辑了代码，修复了一些错误。 :)

【讨论】：

【解决方案3】：

试试

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

【讨论】：

【解决方案4】：

上面的 cmets 是正确的... id 选择器的基本语法是 $(#itemID)...

var myValue = $("#new_grouping_"+i).val(); // 这行得通

【讨论】：