2010-06-21 15 views
1

У меня есть сгенерированные системой ссылки, которые я скрываю вручную. Теперь я хочу удалить атрибуты заголовка ссылки sicne, которые копируются, когда пользователь копирует окружающий текст.Как удалить атрибуты для нескольких дочерних элементов?

<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(".//" + tag + 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> 

Как должна выглядеть функция правильно? однажды я получил это работает, используя этот

function notitle() { 
    var mylist=document.getElementById("notitle"); 
    var listitems= mylist.getElementsByTagName("a"); 
    for (i=0; i<listitems.length; i++) { 
    listitems[i].removeAttribute("title"); 
    } 
} 

но только применительно к первой ссылке.

ответ

1

Это потому, что вы должны указывать один и тот же атрибут id нескольким элементам. Атрибут id должен быть уникальным по всему вашему документу. если не он находит только первый элемент с этим id.

попробовать class="notitle" вместо id="notitle" и вы JS должен выглядеть следующим образом:

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"); 
    } 
    } 
} 

Как я только что узнал, что это не будет работать, кросс-браузер, я бы предложил использовать рамки Javascript для такого рода propblem , потому что такая структура совместима с crossbrowser.

Вы можете добавить следующий скрипт на свой веб-сайт, чтобы сделать его работу во всех браузерах: http://code.google.com/p/getelementsbyclassname/downloads/detail?name=getElementsByClassName-1.0.1.js

Это гораздо проще, если вы будете использовать некоторый JavaScript Framework. Вот пример для jQuery:

function notitle() { 
    $(".notitle a").removeAttr("title"); 
} 
+0

Следует отметить, что document.getElementsByClassName не поддерживается всеми браузерами/версиями. –

+0

@Peter Kruithof: Спасибо за этот совет. Я не знал об этом. – jigfox

+0

Спасибо, я попробовал версию класса (как обновлено сверху), но не смог заставить ее работать в последних версиях FF и Chrome. – Martin

1

Ваш подход правильный, но вы используете один и тот же идентификатор несколько раз. Либо удостоверьтесь, что идентификаторы различны, либо используют общее имя класса и извлекают элементы таким образом.