Как добавить идентификатор, используя имя класса в нескольких тегах?

Question

Например, у нас есть HTML-тег:

<div class="box">This is a box</div>

Мы используем имя класса тега div box и добавляем id="box" в тот же тег div.Вывод:

<div id="box" class="box">This is a box</div>

Мы можем добиться изменений с помощью приведенного ниже кода для одного тега:

document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")

Но если мы не знаем или у нас есть несколько классов вЭлемент HTML, как добавить id ко всем тегам?

Пример:

<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Вывод должен быть таким, как показано ниже:

<div id="box">Hello World</div>
<div id="box--red">Hello World</div>
<div id="box--blue">Hello World</div>
<div id="box--green">Hello World</div>

Answer 1

Вы можете сделать это легко в JavaScript, используя метод querySelectorAll() и просматривая результаты:

document.querySelectorAll("[class^=box]").forEach(function(box) {
  box.setAttribute("id", box.className);
  box.removeAttribute("class");
});

<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Примечание. Хотя это будет работать с мультиклассовыми тегами, пробелы в id недопустимы.Браузеры разрешат пробелы в id, но с ними будет сложнее работать.Вы можете заменить пробелы подчеркиванием, прежде чем присваивать им id.

Answer 2

Этот код прост и работает для вышеуказанного требования.

var a = document.querySelectorAll('div[class^="box"]');
for(var i=0;i<a.length;i++) {
  a[i].setAttribute("id",a[i].getAttribute("class"));
  //console.log(a[i].getAttribute("id"));
}

Answer 3

Я думаю, что следующее может помочь, если вы хотите использовать jQuery:

var boxCollection = $(".wrapper div");
boxCollection.each(function(){
	$(this).attr("id", $(this).attr("class"));
});

#box-1{
 color: red; 
}
#box-2{
  color: orange;
}
#box-3{
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
</div>

Я добавил цветовую схему, чтобы было легче понять переход.

Answer 4

Этот код будет работать для вас

$("div[class^='box']").each(function() {
  var className = $( this ).attr('class');
  $( this ).attr({id: className}).removeAttr('class');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Answer 5

Вы можете использовать атрибут jQuery, запускаемый с помощью селектора , чтобы перебрать все элементы, чтобы можно было установить атрибут id с attr с текущим элементом класс .Затем удалите класс с помощью removeClass () .

$('div[class^=box]').each(function(i, el){
  $(el).attr('id', $(el).attr('class'));
  $(el).removeClass($(el).attr('class'));
});

#box{
}
#box--red{
  color:red;
}
#box--blue{
  color:blue;
}
#box--green{
  color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Ванильный JavaScript: Использование querySelectorAll() и forEach()

var elList = document.querySelectorAll('div[class^=box]');
elList.forEach(function(el) {
  el.id = el.className;
  el.removeAttribute('class');
});

#box{
}
#box--red{
  color:red;
}
#box--blue{
  color:blue;
}
#box--green{
  color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>
<div class="box--red">Hello World</div>
<div class="box--blue">Hello World</div>
<div class="box--green">Hello World</div>

Answer 6

Вы можете использовать подстановочный знак * для имени класса, как показано ниже.

$('[class*="box"]').each(function(i, ele) {
  var id = $(this).attr('class');
  $(this).attr('id', id);

});

.box {
  background-color: lightblue;
}
.box--red {
  background-color: red;
}
.box--blue {
  background-color: blue;
}
.box--green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Hello World</div>

<div class="box--red">Hello World</div>

<div class="box--blue">Hello World</div>

<div class="box--green">Hello World</div>

Answer 7

Я не уверен, почему вы бы это сделали, это реальный сценарий, но его можно получить, обойдя все элементы div, установив id для имени класса, а затем удалив атрибут class.Я создал ванильный пример Javascript ниже.

Примечание: id должно быть уникальным в DOM, иначе вы можете вызвать несколько проблем.

document.querySelectorAll('div').forEach(function(el) {
  el.id = el.classList;
  el.removeAttribute('class');
});

Если вам нужно нацелить разные элементыкоторые имеют "box" в качестве первой части атрибута класса, вы можете использовать селектор [class^="box"] в querySelectorAll примерно так:

document.querySelectorAll('[class^="box"]').forEach(function(el) {
  el.id = el.classList;
  el.removeAttribute('class');
});