Question

所以我的div有id=1_due_date或id=2_due_date

等ID

<div class="form-group">
      <input type="text" class="form-control" id="1_due_date" name="1_due_date" placeholder="YYYY-MM-DD">
</div> 

<div class="form-group">
      <input type="text" class="form-control" id="2_due_date" name="2_due_date" placeholder="YYYY-MM-DD">
</div>

以同样的方式，会有很多前面带数字的div改变像10_due_date。如何使用jquery选择所有这些div。我正在尝试像$('[id^="[1-9]"][id$="_due_date"]')这样的正则表达式，但我没有得到理想的结果。任何建议都会有很大的帮助。

Answer 1

$('input[id*="due_date"]').css("background-color", 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" class="form-control" id="1_due_date" name="1_due_date" placeholder="YYYY-MM-DD" />
</div>

<div class="form-group">
  <input type="text" class="form-control" id="2_due_date" name="2_due_date" placeholder="YYYY-MM-DD">
  <div class="form-group" />
  <input type="text" class="form-control" id="qwe" name="2_due_date" placeholder="YYYY-MM-DD" />
</div>

使用带有属性选择器的通配符。

<强> 注意：的

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

Answer 2

您应该在jQuery中查看Selectors。以下是您可以用于各种操作的快速预览 -

$（＆＃39;输入[id * =＆＃34; due_date＆＃34;]＆＃39;） - 选择具有id属性的所有元素包含due_date子字符串的值，如123_due_date_456，due_date_11，xyz_due_date等。
$（＆＃39;输入[id $ =＆＃34; due_date＆＃34;]＆＃39;） - 选择id的元素，其值确切结束使用due_date，1_due_date，XYZdue_date等。比较区分大小写。
$（＆＃39;输入[id ^ =＆＃34; due_date＆＃34;]＆＃39;） - 选择具有id属性值的元素完全以due_date开头，如due_date_1，due_date123等

在您的情况下，由于您要检查id是否以后缀due_date结尾，您应该使用$('input[id$="due_date"]')，如下所示 -

＆＃13;

$('input[id$="due_date"]').val("Match found");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" class="form-control" id="1_due_date" name="1_due_date" placeholder="YYYY-MM-DD" />
</div>

<div class="form-group">
  <input type="text" class="form-control" id="2_due_date" name="2_due_date" placeholder="YYYY-MM-DD">
  <div class="form-group" />
  <input type="text" class="form-control" id="qwe" name="2_due_date" placeholder="YYYY-MM-DD" />
</div>

＆＃13;

在ids中选择具有相似模式的div

2 个答案: