Javascript 如何使用正则表达式通过 jQuery 通过 ID 选择元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13541898/
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
How can I select an element by ID with jQuery using regex?
提问by Alexander
I have the following input elements:
我有以下输入元素：
<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />
AAA & BBB are constants and I will always know what they are. However RandomString will always be random.
AAA 和 BBB 是常数，我将永远知道它们是什么。但是 RandomString 将始终是随机的。
I want to get the value of AAA_RandomString_BBB. I do not want the values from the input elements with ID ending in either _Start or _End.
我想获取 AAA_RandomString_BBB 的值。我不想要 ID 以 _Start 或 _End 结尾的输入元素的值。
I tried the folowing:
我尝试了以下内容：
$('[id^="AAA_"]')
But the above selects all of the input elements that have an ID starting with "AAA_"
但是上面选择了所有ID以“AAA_”开头的输入元素
I need some way to select using a regex type syntax like:
我需要某种方式来选择使用正则表达式类型的语法，如：
$('[id^="AAA_(.+?)_BBB"]')
Is this possible? If not, can anyone suggest a method of selecting
这可能吗？如果没有，任何人都可以建议一种选择方法
回答by Alexander
You can combine both selectors in a multiple attribute selector.
?$("[id^=AAA_][id$=_BBB]")
It will return all the elements that matches all the specified attribute filters:
它将返回与所有指定属性过滤器匹配的所有元素：
[id^=AAA_]matches elements withidattribute starting withAAA_, and[id$=_BBB]matches elements withidattribute ending with_BBB.
[id^=AAA_]匹配id属性以AAA_,开头的元素[id$=_BBB]匹配id属性以_BBB.结尾的元素。
Another generic alternatives:
另一个通用替代方案：
- Using a custom
:regex()selector, - Using a
.filter()-based approach.
回答by Praveen Kumar Purushothaman
Use this:
用这个：
$('[id^="AAA_"][id$="_BBB"]')
Fiddle: http://jsfiddle.net/J6hGx/
小提琴：http: //jsfiddle.net/J6hGx/
回答by vvohra87
You can look for id's starting with AAAand ending with BBBlike this:
您可以像这样查找 id 的开头AAA和结尾BBB：
?$("[id^=AAA_][id$=_BBB]")
The working fiddle: http://jsfiddle.net/DN9uV/
工作小提琴：http: //jsfiddle.net/DN9uV/
回答by beipawel
回答by Huzaifa Qamer
It would be better to just check for the id ending on _BBB by
最好通过以下方式检查以 _BBB 结尾的 ID
$("[id$=_BBB]")
回答by Bimal Das
How about this :
这个怎么样 ：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />
<script>
$(document).ready(function () {
debugger
var targetElement = $('input')
.filter(function () {
var el = this.id.match(/^AAA.*BBB$/g);
return el;
});
console.log(targetElement.val());
})
</script>
</body>
</html>
回答by Michel Feldheim
I use to solve this with the class selectors which don't need to be unique.
我使用不需要唯一的类选择器来解决这个问题。
This also has a positive effect on speed because no complex search is required Additionally you can use this for the different styling of different elements
这也对速度有积极影响，因为不需要复杂的搜索此外，您可以将其用于不同元素的不同样式
e.g.
例如
<elem id="1" class="aa">element type aa</elem>
<elem id="2" class="aa">element type aa</elem>
<elem id="3" class="aa bb">element type aa and bb</elem>
<elem id="4" class="bb">element type bb</elem>
Now you can simply use the class selector
现在您可以简单地使用类选择器
$('.aa').click(function(){
console.log( 'clicked type aa #' + $(this).attr('id') );
});
$('.bb').click(function(){
console.log( 'clicked type bb #' + $(this).attr('id') );
});
