根据用户输入动态生成id选择器

Question

我在jQuery选择器中遇到问题。我正在根据用户输入动态生成选择器字符串，如下所示： -

jQuery("#" + userInput + "-edit").modal("show")

当用户输入"AdvancedResults."选择器变为

之类的值时

jQuery("#AdvancedResults.-edit").modal("show")

尽管如此，它并没有返回预期的元素

我做的事情不完整吗？有没有更好的方法来解决这个问题？

Btw，为新手问题道歉，因为我是JS世界的新手。

提前致谢。

Answer 1

只需使用：

使用jQuery selectors API中的转义规则，如下所示：

$("#AdvancedResults\\.-edit").modal("show");

你可以替换。至 \。动态使用str.replace（）：

＆＃13;

＆＃13;

var str = "AdvancedResults.";
str = str.replace(/\./g, "\\."); // it will add add \\ dynamically before .
console.log($("#"+str+'-edit').length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input id="AdvancedResults.-edit"  type="text"/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您的元素的标识为#AdvancedResults.-edit，即包含一个点，则必须按照文档jQuery Selectors

中的说明使用\\对其进行转义

Answer 3

在参数是动态的情况下使用 [attribute=""] 选择器，并且可能包含jQuery #不支持的特殊字符 - ID选择器。

jQuery("[id='" + userInput + "-edit']").modal("show")

示例摘录：

var userInput = "abc.";
alert(jQuery("[id='" + userInput + "-edit']").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="abc.-edit" value="test"/>

Answer 4

我使用属性hack解决了它。

如下： -

jQuery("[id='" + userInput + "-edit']").modal("show");

它非常适合我。