Как добавить идентификатор, используя имя класса в нескольких тегах?
Например, у нас есть 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>
@MatthewHerbst приведенный выше код предназначен только для примера на веб-сайте, у нас есть несколько разделов, использующих имя класса (например, заголовок, слайдер, сведения, службы и т. д.). Я хочу добавить идентификатор, используя имя класса.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Я не уверен, зачем вы это делаете, это реальный сценарий, но его можно достичь, перебрав все элементы div, установив идентификатор для имени класса, а затем удалив атрибут класса. Я создал ванильный пример 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');
});
Вы хотели сказать el.removeAttr() вместо el.removeAttribute()?
Нет, removeAttr() - это метод jQuery, а el.removeAttribute() - это обычный javascript, который не требует jQuery.
Хотя это будет работать, почему вы используете свойство classList, если вам не нужен массив? Вы создаете JavaScript и создаете массив из строки, а затем конвертируете ее обратно в строку, чтобы сохранить в атрибуте id. Вместо этого просто используйте className.
Да, вы можете использовать здесь className.
Вы можете использовать подстановочный знак * в имени класса, как показано ниже.
$('[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>Вы можете использовать jQuery Атрибут начинается с селектора для цикла по всем элементам, чтобы вы могли установить атрибут я бы с 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>Хотя это будет работать, почему вы используете свойство classList, если вам не нужен массив? Вы создаете JavaScript и создаете массив из строки, а затем конвертируете ее обратно в строку, чтобы сохранить в атрибуте id. Вместо этого просто используйте className.
Этот код подойдет вам
$("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>Я думаю, что следующее может помочь, если вы хотите использовать 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>Я добавил цветовую схему, чтобы легче было понять переход.
Вы можете легко сделать это в 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.
Этот код прост и соответствует вышеуказанному требованию.
var a = document.querySelectorAll('div[class^ = "box"]');
for(var i=0;i<a.length;i++) {
a[i].setAttribute("id",a[i].getAttribute("class"));
//console.info(a[i].getAttribute("id"));
}
Итак, вам не следует пытаться сделать так, чтобы у одного предмета был один и тот же
id- это приведет к тому, что позже случатся плохие вещи. Используйтеid, когда на странице будет одна и только одна вещь с этимid.