Javascript 在 jquery 选择器中使用变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4823339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using variables within a jquery selector
提问by mheavers
I'm trying to build a dynamic jquery selector with the following code:
我正在尝试使用以下代码构建动态 jquery 选择器：
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"
其中 segment_3 是我从 url 字符串中成功检索到的值，例如，它可能返回“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.
但是当试图创建变量 num_children 时，这个引用不起作用。如何构建代码以构建动态引用？谢谢你的帮助。
回答by Kamil Sarna
Assuming var section_id = 'section_1' this:
假设 var section_id = 'section_1' 这个：
$('#'+ 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.
是的，这也是有效的。它将为您提供 #section_1 元素中的所有 ul 元素（无论它们有多深）。可能你会得到元素数组并在它上面调用 .children() 也很好。它应该都有效。
回答by ludesign
Up to HTML 4.01 the id attribute is very restricted regarding the allowed value characters (naming rules):
在 HTML 4.01 之前，id 属性在允许的值字符（命名规则）方面受到非常严格的限制：
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.
id 属性必须以字母 AZ 或 az 开头，后跟：字母（A-Za-z）、数字（0-9）、连字符（“-”）、下划线（“_”）、冒号（“:”） , 和句点 (".") 并且所有值都区分大小写。
*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)*
*注意：根据我的经验，我发现只使用小写字符和 _ 作为 id 使它们非常清晰，并且它们在 CSS 选择器中脱颖而出（.something:pseudo-class）*
On the other hand in HTML5 you can have almost anything as id's value.
另一方面，在 HTML5 中，您几乎可以将任何东西作为 id 的值。
Ref: http://www.w3.org/TR/html5/elements.html#the-id-attribute
参考：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:
因此，您的选择器对于 HTML5 规范非常好（有效），但是为了让它与 jQuery 一起使用，您需要转义选择器解析器使用的具有特殊含义的所有字符。并且因为它的 JavaScript 代码，您必须使用两个 \\ （第一个转义第二个）。JQuery 没有为您提供执行此操作的方法，因此以下是我正在使用的代码：
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,'\');
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. :)
我编辑了代码，修复了一些错误。:)
回答by Aliostad
Try
尝试
var num_children = $('#'+ section_id.substring(1, section_id.length-2) + ' ul').children().size();
回答by John K.
The comments above are correct... the basic syntax for an id selector is $(#itemID)...
上面的评论是正确的... id 选择器的基本语法是 $(#itemID)...
var myValue = $("#new_grouping_"+i).val(); // this works
var myValue = $("#new_grouping_"+i).val(); // 这有效
