How to remove attributes for multiple child elements?
I have system-generated links which I hide manually. Now I want to remove the link's title attributes sicne those are copied when the user copies surrounding text.
<html>
<head>
<script type="text/javascript">
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + ta开发者_运维问答g + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
function notitle() {
var mylist=document.getElementsByClassName("notitle");
for (j=0; j<mylist.length; j++) {
var listitems= mylist[j].getElementsByTagName("a");
for (i=0; i<listitems.length; i++) {
listitems[i].removeAttribute("title");
}
}
}
</script>
</head>
<body onLoad="notitle()">
<p>Before hidden link 1: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 1.</p>
<p>Before hidden link 2: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 2.</p>
<p>Before hidden link 3: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 3.</p>
</body>
</html>
How should the function look like correctly? I once got it working using this
function notitle() {
var mylist=document.getElementById("notitle");
var listitems= mylist.getElementsByTagName("a");
for (i=0; i<listitems.length; i++) {
listitems[i].removeAttribute("title");
}
}
but that only applied to the first link.
that is because you should't give the same id attribute to multiple elements. The id attribute must be unique all over your document. if not it only finds the first element with this id.
try class="notitle" instead of id="notitle" and you JS should look like this:
function notitle() {
var mylist=document.getElementsByClassName("notitle");
for (j=0; j<mylist.length; j++) {
var listitems= mylist[j].getElementsByTagName("a");
for (i=0; i<listitems.length; i++) {
listitems[i].removeAttribute("title");
}
}
}
As I've just learned this would not work cross browser, I would suggest to use a Javascript framework for this kind of propblem, because such a framework is crossbrowser compatible.
You can add the following script to your website to make it work in all browsers: http://code.google.com/p/getelementsbyclassname/downloads/detail?name=getElementsByClassName-1.0.1.js
It's far easier if you would use some JavaScript Framework. Here an example for jQuery:
function notitle() {
$(".notitle a").removeAttr("title");
}
Your approach is correct but you're using the same id multiple times. Either make sure the id's are different, or use a generic class name and retrieve the elements that way.
加载中,请稍侯......
精彩评论