具有部分 ID 信息的目标元素答案

【问题标题】：Target element with partial ID information具有部分 ID 信息的目标元素
【发布时间】：2019-09-19 22:07:39
【问题描述】：

只是徘徊，有没有可能用jquery将class添加到带有部分id信息的html元素中。

例子：

我有以下html代码

<e id="1-1">1.1</e>
<e id="1-2">1.2</e>
<e id="2-1">2.1</e>
<e id="2-2">2.2</e>

目前我正在使用以下代码在类中添加：

 $("e[id=1-1]").addClass("keyWord");

是否可以传入像 1 这样的部分 id，它会为 id 为 1-1 和 1-2 的元素添加类？

【问题讨论】：

PS：<e>是什么HTML标签？你是说<em>？
相关：stackoverflow.com/questions/33615334/…
旁注，如果您要进行精确的 id 匹配，则应避免使用 [id=""] 选择器，因为这是一个属性选择器，而不是一个 id 选择器。属性选择器不会从与 id 相关的性能逻辑中受益。属性可以在任何元素上，因此浏览器必须检查上下文中的每个元素。其中一个 id 只能在一个元素上，并且浏览器以某种方式对它们进行哈希处理以便快速查找，因此它们非常快。

标签： javascript jquery

【解决方案1】：

要定位以开头的属性值 - 使用 Starts With 选择器 ^=

 $('[id^="1-"]').addClass("keyWord");

.keyWord {background: red;}

<span id="1-1">1.1</span>
<span id="1-2">1.2</span>
<span id="2-1">2.1</span>
<span id="2-2">2.2</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你也可以用纯 CSS 做到这一点：

[id^="1-"]{
  background: red;
}

<span id="1-1">1.1</span>
<span id="1-2">1.2</span>
<span id="2-1">2.1</span>
<span id="2-2">2.2</span>

你也有其他的：包含*=和结束于$=等等。在这里找到MDN - Attribute selectors

【讨论】：

【解决方案2】：

你可以编写一个简单的 js 来检索元素并添加到它的类列表中。

let element=document.getElementById("1-1");
    element.classList.add("1-1-1");

【讨论】：