在多重选择器中使用变量

Question

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

我试过很多类似 $('[id^='+instanceId'][id$=typesCle]') 的东西，有或没有双引号，但现在找不到正确的答案。错误是 Uncaught SyntaxError: Invalid or unexpected token

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

在多重选择器中使用变量

Using variable in Multiple selector

javascript

jquery

jquery-selectors

thymeleaf

spring-boot