Using variable in Multiple selector

Question

I use JQuery 1.11 and want to act on all ids beginning with partitions0.instances0.natures and ending with typeCle like : id="partitions0.instances0.natures0.typeCle". Then I will affect to those, the same value than my selected element. But my problem here is on the selector.

I've tried many things like $('[id^='+instanceId'][id$=typesCle]') with or without double quotes but can't find the right answer by now. The error is Uncaught SyntaxError: Invalid or unexpected token

All the jquery code :

var instanceId = $(this).attr("id");
var natureId = $(this).attr("id");
var valeur = $(this).prop('value');
natureId = natureId.replace("typesCle", "nature").replace(/\./g, '\\\\.');
$('[id^='+ natureId +'][id$=typesCle]').each(){
    this.val(valeur);
}

I've also replaced the variable by its value to check and I 've the same error message :

$('[id^=partitions0\\.instances0\\.nature][id$=typesCle]').each(){
    console.log(valeur);
    this.val(valeur);
}

The html code :

<div class="col-sm-6">
       <select th:field="*{partitions[__${rowPartitionStat.index}__].instances[__${rowInstanceStat.index}__].typesCle}" class="form-control modRepInstance">
         <option th:each="typeCle : ${allTypesCle}"
           th:value="${typeCle}" th:text="${typeCle}">...</option>
       </select>
</div>

You probably need to escape the `.` in the `instanceId` value so they are not interpreted by Sizzle as class selectors. — Rory McCrossan, Sep 28 '17 at 16:13
Your current code has a `+` missing and has a single `"` `$('[id^='+instanceId + '][id$=typesCle]')` - Not sure if this is your actual code or copypasta errors. Also, if you expect a collection of elements `.val()` will only be against the first match and you might need to use a `.each()` — Nope, Sep 28 '17 at 16:14
It's not a good idea to use `.` in IDs, since they're used in selectors to mean that what follows is a class name. While you can escape them, it's inconvenient. — Barmar, Sep 28 '17 at 16:18
@Barmar : It's spring/thymeleaf generated id, so I don't think I can change it simply. — jayjaypg22, Sep 29 '17 at 08:53
@Fran : what would be your correction, $('[id^='+instanceId+'][id$=typesCle]').val($(this).prop('value'));` does the same error : `Uncaught SyntaxError: Invalid or unexpected token`. — jayjaypg22, Sep 29 '17 at 09:03
@jayjaypg22 You have a syntax error. Your selector is most likely not valid syntax. Have you escaped the periods `.` as `Rory` suggested? e.g: `\\.` Please write out your selector to your console to make sure the selector is valid. e.g: `console.log('[id^='+instanceId+'][id$=typesCle]');` - Please see the answers in this SO question showing ways to work with periods in id selectors [**How to select html nodes by ID with jquery when the id contains a dot?**](https://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot) — Nope, Sep 29 '17 at 09:58
@Fran I've added the html code. It used thymeleaf to interact with my java code. I can't escape the '.' because it's generated code. The `console.log('[id^='+instanceId+'][id$=typesCle]');` returns : `[id^=partitions0.instances0.typesCle][id$=typesCle] ` — jayjaypg22, Sep 29 '17 at 10:14
@jayjaypg22 You escape the dot inside the selector not the actual html identifier. Just replace `.` with `\\.` in your `instanceId` and it will work. You can use `.replace()` for that as well. — Nope, Sep 29 '17 at 10:18
@Fran thanks, the escape works but I still have the same error : `Uncaught SyntaxError: Invalid or unexpected token`on the line `$('[id^=partitions0\\.instances0\\.nature][id$=typesCle]').each(){`. I've updated the code — jayjaypg22, Sep 29 '17 at 14:22

Nope · Accepted Answer · 2017-09-29T15:17:48.367

After a little to and fro it seems you don't need to escape the dot and just need to surround the selector with an extra pair of double quotes ".

Your original code actually had the first double quote in it but in the wrong place and it had the closing quote missing as well as a missing +, hence the syntax error.

Overall, the difference from your original code is repositioning of the opening quote, adding the closing quote and adding the second +

Org: '"[id^='+instanceId'][id$=typesCle]'
New: '[id^="'+ instanceId + '"][id$=typesCle]'

The example below seems to work. Though you still will need to use the .each() to iterate through all the matches.

var outerId = 'partitions0.instances0.nature';

$(document).ready(function() {
 var selector = '[id^="' + outerId + '"][id$=typesCle]';
 console.log(selector);
 
 var x = $(selector);
 console.log(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
  <select id="partitions0.instances0.nature.SomeUniqueValue.typesCle">
         <option value="Option1Value1" text="Option1Value1">Select1Option1Value1</option>
       </select>
  <select id="partitions0.instances0.nature.SomeOtherValue.typesCle">
         <option value="Option1Value1" text="Option1Value1">Select2Option1Value1</option>
       </select>
</div>

Thank you very much for your perseverance! – jayjaypg22 Sep 29 '17 at 15:49 — jayjaypg22, Sep 29 '17 at 15:49

Using variable in Multiple selector

1 Answers1