Question

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

private void loadMenu() {

    adapter = new FirebaseRecyclerAdapter<Category, MenuViewHolder>(Category.class,R.layout.menu_item,MenuViewHolder.class,category) {
        @Override
        protected void populateViewHolder(MenuViewHolder viewHolder, Category model, int position) {
            viewHolder.txtMenuName.setText(model.getName());
            Picasso.with(getBaseContext()).load(model.getImage()).into(viewHolder.imageView);
            final Category clickItem = model;
            viewHolder.setItemClickListener(new ItemClickListener() {
                @Override
                public void onClick(View view, int position, boolean isLongClick) {
                    Toast.makeText(Home.this,""+clickItem.getName(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    };
    recycler_menu.setAdapter(adapter);
}

我们正在使用div标签类名<div class="box">This is a box</div>，并在同一box标签中添加id="box"。输出为：

div

我们可以使用以下代码对单个标签进行更改：

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

但是如果我们不知道HTML元素中是否有多个类，或者如何在所有标签中添加document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")呢？

示例：

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>

Answer 1

您可以在以下类名称上使用通配符*。

$('[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 2

我不确定为什么要在现实世界中这样做，但是可以通过遍历所有div元素，将id设置为类名，然后删除class属性来实现。我在下面创建了一个普通的Javascript示例。

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

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

如果您需要定位以“框”作为类属性第一部分的其他元素，则可以在[class^="box"]中使用选择器querySelectorAll，如下所示：

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

Answer 3

您可以使用jQuery的Attribute Starts With Selector遍历所有元素，以便可以使用当前元素的类的 attr 设置属性 id 。然后使用 removeClass（）删除 class 。

$('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 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，我认为以下方法可以解决问题：

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 6

您可以使用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。

Answer 7

此代码很简单，可以满足上述要求。

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"));
}

如何在多个标签中使用带有类名的ID？

7 个答案: