Question

我试图在jquery中使用id完全匹配的addClass，出于某种原因，对于任何部分匹配的id，它也是addClass。

示例：我有以下html代码：

<span>
  <e class="test" id="PID-1">0</e>
  <e class="test" id="PID-1-1">1</e>
  <e class="test" id="PID-1-2">2</e>
  <e class="test" id="PID-1-3">3</e>
</span>

我有以下jquery代码来添加类：

$("e[id*=PID-1]").addClass("foundYou");

由于某种原因，它会为以PID-1开头的所有4个id添加类

有人对我的代码怎么回事吗？

Answer 1

请根据完整匹配ID尝试在下面的行中添加类别。

$("#PID-1").addClass("foundYou");

foundYou 类添加了 PID-1 id

Answer 2

$("e[id*=PID-1]").addClass("foundYou");将为您提供所有具有id选择器的匹配元素。如果要定位任何特定对象，则必须按如下所示按数组获取元素：

$($("e[id*=PID-1]")[0]).addClass("foundYou");

.foundYou{
 color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
  <e class="test" id="PID-1">0</e>
  <e class="test" id="PID-1-1">1</e>
  <e class="test" id="PID-1-2">2</e>
  <e class="test" id="PID-1-3">3</e>
</span>

或者，正如我在评论中提到的那样，将元素与id匹配的最简单方法是使用选择器获取元素：

$("#PID-1").addClass("foundYou");

Answer 3

您正在使用通配符*来匹配ID。

id*=PID-1是什么意思？

这将在ID中的任意位置选择PID-1。您的所有ID都具有PID-1，因此它是所有ID的添加类。

您可以使用如下所示的:first选择器在您的第一次通配符匹配中添加类别。

$("e[id*=PID-1]:first").addClass("foundYou");

.foundYou {
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
  <e class="test" id="PID-1">0</e>
  <e class="test" id="PID-1-1">1</e>
  <e class="test" id="PID-1-2">2</e>
  <e class="test" id="PID-1-3">3</e>
</span>

或者，您可以将filter函数与RegEx配合使用以匹配确切的ID：

$('e')
  .filter(function() {
    return this.id.match(/^PID-1$/);
  })
  .addClass("foundYou");

.foundYou {
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
  <e class="test" id="PID-1-1">1</e>
  <e class="test" id="PID-1-2">2</e>
  <e class="test" id="PID-1-3">3</e>
  <e class="test" id="PID-1">0</e>
</span>

与jQuery中的id完全匹配的addClass

3 个答案: