Целевой элемент с частичной идентификационной информацией

Question

Просто бродя, можно ли будет добавить класс в элемент html с частично идентифицирующей информацией с помощью jquery.

Пример:

У меня есть следующий 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, и он добавит класс для элемента с идентификатором 1-1а 1-2?

Answer 1

вы могли бы написать простой js, который извлекает элемент и добавляет его в список классов.

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

Answer 2

Чтобы указать значение атрибута, которое начинается с - используйте Начинается с селектор ^=

 $('[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 - Селекторы атрибутов