jquery 使用JavaScript从链接中删除href

rkttyhzu  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(174)

我正在使用此代码从我的页面中删除href链接。它工作得很好,除了我不想针对所有的链接。相反,我想针对一个div中的所有链接,比如禁用一个id为“test2”的特定div的所有链接。

var all_links = document.getElementsByTagName("a");

for(var i=0; i<all_links.length; i++){
    all_links[i].removeAttribute("href");
}

字符串

dojqjjoe

dojqjjoe1#

您可以使用querySelectorAll()来实现此目的。传递一个CSS选择器,它匹配您需要定位的元素。根据您所描述的,div#test2 a将执行以下操作:

var all_links = document.querySelectorAll("div#test2 a");

for(var i=0; i<all_links.length; i++){
    all_links[i].removeAttribute("href");
}

字符串
JSFiddle
或者,为了获得最大兼容性(IE <9):

var all_links = document.getElementById('test2').getElementsByTagName("a");

5jvtdoz2

5jvtdoz22#

有几个选项,这里使用ES6:

// retrieving all <a> elements within <div id="test2">, using
// document.querySelectorAll() and converting that collection
// into an Array, using Array.from():
var all_links = Array.from(document.querySelectorAll("div#test2 a"))

    // iterating over that Array using Array.prototype.forEach(),
    // along with an Arrow function to remove the 'href' attribute
    // from each of the <a> elements in the Array:
    .forEach(link => link.removeAttribute('href'));

字符串

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(link => link.removeAttribute('href'));
<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

的数据
或者,不是删除href属性,而是将其设置为'#'的值:

var all_links = Array.from(document.querySelectorAll("div#test2 a"))

    // here we use setAttribute() to set the value of the href
    // attribute to the '#' value:
    .forEach(link => link.setAttribute('href', '#'));

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(link => link.setAttribute('href', '#'));
<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

的字符串
或者,如果一个没有href属性的<a>元素没有任何特殊的“用途”,我们可以打开文本或其他内容,并删除不再有用的<a>元素:

var all_links = Array.from( document.querySelectorAll("div#test2 a") )

  // using the anonymous function of Array.prototype.forEach() rather
  // than Arrow functions, given the work being done here:
  .forEach(function(link){

    // while the <a> element has a firstChild:
    while(link.firstChild) {

      // we access the parentNode of the <a> and
      // use the insertBefore() method to insert
      // the firstChild of the <a> before the <a>:
      link.parentNode.insertBefore(link.firstChild, link);
    }

    // once the <a> is emptied of its content,
    // we again access the parentNode and remove
    // the <a> element itself:
    link.parentNode.removeChild(link);
});

var all_links = Array.from(document.querySelectorAll("div#test2 a")).forEach(function(link) {
  while (link.firstChild) {
    link.parentNode.insertBefore(link.firstChild, link);
  }
  link.parentNode.removeChild(link);
});
<a href="#href1">Link 1</a>
<div id="test2">
  <a href="#href2">Link 2</a>
  <a href="#href3">Link 3</a>
</div>
<a href="#href4">Link 4</a>
<div id="test3">
  <a href="#href5">Link 5</a>
  <a href="#href6">Link 6</a>
</div>

参考文献:

jhkqcmku

jhkqcmku3#

因为jQuery标签包含在内:-

$('#test2 a').removeAttr('href');

个字符

7d7tgy0s

7d7tgy0s4#

既然你已经用jQuery标记了这个,你可以使用以下命令:

$("div#test2 a").removeAttr("href");

字符串

相关问题