我正在使用这段代码来删除页面上的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");
}
我正在使用这段代码来删除页面上的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");
}
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");
}
或者,为了最大兼容性(IE<9):
var all_links = document.getElementById('test2').getElementsByTagName("a");
有几种方法可以实现这个,这里使用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>
参考资料:
$('#test2 a').removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="test">test</a>
<div id="test2">
<a href="test1">test</a>
<a href="test2">test</a>
</div>
既然您已经使用了jQuery标签,您可以使用以下代码:
$("div#test2 a").removeAttr("href");