首页 文章

如何在多个标签中使用类名添加ID？

提问于
浏览 次
3

例如，我们有一个HTML标记：

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

我们使用div标签类名 box 并在同一 div 标签中添加 id="box" . 输出是：

<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>
javascript jquery html dom

7 回答

  • 1

    此代码很简单，适用于上述要求 .

    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"));
}
    回复于
  • 0

    这段代码对你有用

    $("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>
    回复于
  • 0

    您可以在类名上使用通配符 * ，如下所示 .

    $('[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>
    回复于
  • 0

    如果您愿意使用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>

    我添加了一些配色方案，以便更容易理解过渡 .

    回复于
  • 0

    您可以使用 querySelectorAll() 方法在JavaScript中轻松完成并循环结果：

    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 指定空格之前，可以用下划线替换空格 .

    回复于
  • 0

    您可以使用jQuery的Attribute Starts With Selector循环遍历所有元素，以便您可以使用当前元素的类设置属性id with 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>

    Vanilla 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>
    回复于
  • 4

    我不确定为什么你会这样做是一个真实的场景，但它可以通过循环所有 div 元素，将id设置为类名，然后删除class属性来实现 . 我在下面创建了一个vanilla Javascript示例 .

    注意： id 在DOM中必须是唯一的，否则可能会导致多个问题 .

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

    如果您需要将具有"box"作为class属性的第一部分的不同元素作为目标，则可以使用 querySelectorAll 中的选择器 [class^="box"] ，如下所示：

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

相关问题