Question

我有一个看起来像这样的模板：

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

我想获取每个ID和href元素并连接一个数字，以便它们可以是唯一的。

像这样：

<a href="#someHref0" class="className" data-toggle="modal">
<div id="someHref0" class="modal fade"></div>

<a href="#someHref1" class="className" data-toggle="modal">
<div id="someHref1" class="modal fade"></div>

<a href="#someHref2" class="className" data-toggle="modal">
<div id="someHref2" class="modal fade"></div>

<a href="#someHref3" class="className" data-toggle="modal">
<div id="someHref3" class="modal fade"></div>

Answer 1

$('.yourclassname').each(function(i){
    var newID=$(this).attr('id') + i;    // This is your new id
    $(this).attr('id',newID);            // Here you are modifying attribute
});

以下是示例，我将其粘贴两次，一次使用attr id，另一次使用href

$('.modal').each(function(i){
    var newID=$(this).attr('id') + i;
    $(this).attr('id',newID);
});


$('.className').each(function(i){
    var href=$(this).attr('href') + i;
    $(this).attr('href',href);
});

console.log($('body').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal">
<div id="someHref" class="modal fade"></div>

Answer 2

纯JS解决方案。

＆＃13;

MyClass<0>

＆＃13;

var divs = document.getElementsByClassName('modal');
var a = document.getElementsByClassName('className');
Array.from(divs).forEach(function(v, i){
  v.setAttribute('id', v.getAttribute('id')+i);
});
Array.from(a).forEach(function(v, i){
  v.setAttribute('href', v.getAttribute('href')+i);
});

console.log(Array.from(divs));
console.log(Array.from(a));

＆＃13;

或使用<a href="#someHref" class="className" data-toggle="modal"> <div id="someHref" class="modal fade"></div> <a href="#someHref" class="className" data-toggle="modal"> <div id="someHref" class="modal fade"></div> <a href="#someHref" class="className" data-toggle="modal"> <div id="someHref" class="modal fade"></div> <a href="#someHref" class="className" data-toggle="modal"> <div id="someHref" class="modal fade"></div>：

＆＃13;

jQuery

＆＃13;

$('.className').each(function(i) {
  $(this).attr('href', $(this).attr('href') + i);
  $('.modal').eq(i).attr('id', $('.modal').eq(i).attr('id') + i);
});

console.log($('body').html())

＆＃13;

Answer 3

$(document).ready(function(){
  var index=0;
  $('className').each(function(){
    $(this).prop('id','someHref'+index);
    $(this).prop('href','#someHref'+index);
    index++;
  });
});

解决它

Answer 4

您可以使用类似下面的代码。

＆＃13;

$("a").each(function(index){
var id = "someHref" + index;
var href = "#"+ id;

$(this).attr("href",href);
$(this).next("div").attr("id", id);


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#someHref" class="className" data-toggle="modal"></a>
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal"></a>
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal"></a>
<div id="someHref" class="modal fade"></div>

<a href="#someHref" class="className" data-toggle="modal"></a>
<div id="someHref" class="modal fade"></div>

＆＃13;

jQuery增加元素的ID和href

4 个答案: