javascript - jQuery 增加元素的 ID 和 href

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>