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

Question

I am facing a problem in jQuery selector. I am generating selector string dynamically based on user-input as show below :-

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

When the user enters value like "AdvancedResults." Selector becomes

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

which does not return expected element, despite the fact that

Am I doing something patchy ? Is there any better way to solve this problem ?

Btw, apologising for newbie question, as I am new to JS world.

Thanks in advance.

Answer 1

Just use:

Use the escaping rules from the jQuery selectors API as follows:

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

You can replace . to \\. dynamically using str.replace():

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

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

Answer 2

如果您的元素确实有一个ID #AdvancedResults.-edit ，即包含一个点，则必须使用jQuery Selectors中的\\\\对其进行转义。

Answer 3

Use [attribute=""] selector in such cases where the parameter is dynamic and might contain special chars not supports by jQuery # - ID selector.

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

Example snippet :

 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

I have solved it using attribute hack.

It's as follow :-

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

It worked perfectly for me.