如何通过javascript或jQuery删除重复的attr href而保留第一个

Question

如何通过Javascript或jQuery删除重复的attr href而保留第一个attr href？

以下是默认代码。并且a.class和id不能改变。

<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
</div>

我需要这样做：

<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  Text1
  <a href="test-2" class="link">Text2</a>
  Text2
  <a href="test-3" class="link">Text3</a> 
  Text3
  Text3
</div>

Answer 1

类似这样的代码可以大致实现您正在寻找的功能：

​

let tracker = {}; // track href values

$('a').each(function(anc) {
  var href = $(this).attr('href');
  if (tracker.hasOwnProperty(href)) {
    $(this).replaceWith(`<div>${$(this).text()}</div>`);
  } else {
    tracker[href] = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-class">
  <a href="test-0" class="link">Text0</a>
  <a href="test-1" class="link">Text1</a>
  <a href="test-1" class="link">Text1</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a>
  <a href="test-3" class="link">Text3</a>
  <a href="test-3" class="link">Text3</a>
</div>

​

Answer 2

你可以尝试使用下面的javascript：

​

var hrefTags = document.getElementsByTagName('A');
var arrValue = [];
for (var i=0; i<hrefTags.length; i++){
  if(arrValue.indexOf(hrefTags[i].innerHTML)>-1){
    hrefTags[i].outerHTML = hrefTags[i].outerHTML.replace(/a/g, 'span');
    i--;
  } else {
    arrValue.push(hrefTags[i].innerHTML);
  }
}

<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
</div>

​

Answer 3

很抱歉回复晚了，但这是我的答案：:D

$(window).on('load',function() {
    var last_elm = $('a[href]:first').text();
    $('a[href]').each(function(i) {
        var content = $(this).text();
        if (i && content==last_elm) $(this).replaceWith('<span>'+content+'</span>');
        last_elm=content;
    });
});