Question

重新发布页面时如何查找所有重复的ID：

假设我们有这样的html：

<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="last" />
<input type="radio" id="last" />

这个想法是找到重复的ID并添加+1或类似的内容：

我想要实现的是：

<input type="radio" id="name1" />
<input type="radio" id="name2" />
<input type="radio" id="name3" />
<input type="radio" id="last1" />
<input type="radio" id="last2" />

JS

 $('[id]').each(function(){
  var ids = $('[id="'+this.id+'"]');
  if(ids.length>1 && ids[0]==this)
      $(this).attr('id', $(this).attr('id') + i);
 });

有什么想法吗？谢谢大家。

Answer 1

我强烈建议您提供有效的HTML，而不要操作ID。

但是，由于属性值选择器可能返回多个元素，您已经关闭了，您需要迭代匹配的元素

var handled = [];
$('[id]').each(function() {
  if (handled.includes(this.id)) {
    return;
  }
  var elemets = $('[id="' + this.id + '"]');
  if (elemets.length > 1) {
    handled.push(elemets.attr('id'));
    elemets.attr('id', function(index, v) {
      return v + (index+1);
    });
  }
});

//For Readablity
$('[id]').each(function(){
  console.log(this.outerHTML)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="last" />
<input type="radio" id="last" />

Answer 2

尝试

 var  i = 0; 
 ('[id]').each(function(){
  var allIds = $('[id^="'+this.id+'"]').length
  var ids = $('[id="'+this.id+'"]');
  if(ids.length>1 && ids[0]==this)
   var i = allIds - ids.length + 1
      $(this).attr('id', $(this).attr('id') + i++);
 })

Answer 3

尝试这样。

 var allId = [];
 var data = [];
 $('[id]').each(function(){
  var ids = $('[id="'+this.id+'"]');
  if(allId.indexOf(this.id) < 0){
    data[this.id] = 1;
    allId.push(this.id);
  } else {
    data[this.id]++;
  }
  $(this).attr('id', $(this).attr('id') + data[this.id]);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="last" />
<input type="radio" id="last" />

Answer 4

不需要jQuery：

const ids = {}

document.querySelectorAll('[id]').forEach(node => {
  if (ids[node.id] !== undefined) {
    ids[node.id] += 1
  } else {
    ids[node.id] = 1
  }
  node.id = `${node.id}${ids[node.id]}`

})

document.querySelectorAll('[id]').forEach(node => console.log(node))

<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="name" />
<input type="radio" id="last" />
<input type="radio" id="last" />

Answer 5

var a = [];
var i =0;
 jQuery('[id]').each(function(){
    if(a.indexOf(this.id) !== -1){ //checks if id exists in array
        i++;
    }
    else{
        i = 1;
        a.push(this.id);
    }
    jQuery(this).attr('id', jQuery(this).attr('id') + i);
 });

说明：我将每个新ID存储在数组中。每次迭代时，它都会检查ID是否重复，如果重复，则属性增加到1。

查找所有重复的ID并添加唯一密钥

5 个答案: