javascript - 在多重选择器中使用变量

Question

我使用 JQuery 1.11 并希望对以 partitions0.instances0.natures 开头并以 typeCle 结尾的所有 id 执行操作，例如: id="partitions0.instances0 .natures0.typeCle"。然后我将影响那些与我选择的元素相同的值。但我的问题出在选择器上。

我已经尝试了很多东西，例如 ​$('[id^='+instanceId'][id$=typesCle]') 带或不带双引号，但找不到正确的现在就回答吧。错误是未捕获的语法错误:无效或意外的标记

所有 jquery 代码:

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);
}

我还用变量的值替换了变量进行检查，并且出现了相同的错误消息:

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

html 代码:

<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>

Answer 1

经过一番来回之后，您似乎不需要转义点，只需要用一对额外的双引号 " 将选择器括起来。

您的原始代码实际上有第一个双引号，但位置错误，并且缺少结束引号以及 +，因此出现语法错误。

总的来说，与原始代码的区别在于重新定位了开盘报价、添加了收盘报价并添加了第二个 +

组织:​'"[id^='+instanceId'][id$=typesCle]'
新:'[id^="'+ instanceId + '"][id$=typesCle]'

下面的示例似乎有效。尽管您仍然需要使用 .each() 来迭代所有匹配项。

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>