getElementsByClassName Проблема с разрешением IE

Question

У меня возникли проблемы с выяснением путей решения проблемы getElementsByClassName в IE. Как бы я лучше всего реализовал robert nyman (не могу опубликовать ссылку на него с момента моего разрешения только 1) в мой код? Или было бы лучше разрешение jquery? мой код

function showDesc(name) { 
var e = document.getElementById(name); 
//Get a list of elements that have a class name of service selected 
var list = document.getElementsByClassName("description show"); 

//Loop through those items 
for (var i = 0; i < list.length; ++i) { 
    //Reset all class names to description 
    list[i].className = "description"; 
} 

if (e.className == "description"){ 
    //Set the css class for the clicked element 
    e.className += " show"; 
} 
else{ 
    if (e.className == "description show"){ 
     return; 
    } 
}} 

, и я использую его на этой странице dev.msmnet.com/services/practice-management, чтобы показать/скрыть описание для каждой службы (работает в Chrome и FF). Любые советы будут очень признательны.

Answer 1

мне было интересно посмотреть, что версия JQuery вашей функции будет выглядеть, так что я пришел с этим:

function showDesc(name) { 
    var e = $("#" + name); 
    $(".description.show").removeClass("show"); 
    if(e.attr("class") == "description") { 
     e.addClass("show"); 
    } else if(e.hasClass("description") && e.hasClass("show")) { 
     return; 
    } 
} 

Answer 2

Вы можете заменить getElementsByClassName() следующим:

function getbyclass(n){ 
    var elements = document.getElementsByTagName("*"); 
    var result = []; 
    for(z=0;z<elements.length;z++){ 
    if(elements[z].getAttribute("class") == n){ 
     result.push(elements[z]); 
    } 
    } 
    return result; 
} 

Затем вы можете использовать его как это:

getbyclass("description") // Instead of document.getElementsByClassName("description") 

Answer 3

Это должно поддерживать несколько классов.

function getElementsByClassName(findClass, parent) { 

    parent = parent || document; 
    var elements = parent.getElementsByTagName('*'); 
    var matching = []; 

    for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){ 

    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) { 
     matching.push(elements[i]); 
    } 

    } 

    return matching; 

} 

Вы также можете передать родителям, чтобы сделать поиск DOM немного быстрее.

Если вы хотите, чтобы соответствовать getElementsByClassName('a c') HTML <div class="a b c" /> затем попытаться изменить его, как так ...

var elementClasses = elements[i].className.split(/\s+/), 
    matchClasses = findClass.split(/\s+/), // Do this out of the loop :) 
    found = 0; 

for (var j = 0, elementClassesLength = elementClasses.length; j < elementClassesLength; j++) { 

    if (matchClasses.indexOf(elementClasses[j]) > -1) { 
     found++; 
    } 

} 

if (found == matchClasses.length) { 
    // Push onto matching array 
} 

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

if (typeof document.getElementsByClassName != 'function') { } 

Answer 4

Даже простое решение JQuery:

$('.service').click(function() { 
    var id = "#" + $(this).attr('id') + 'rt'; 
    $('.description').not(id).hide(); 
    $(id).show(); 
} 

Зачем с show класс, если вы используете JQuery?

Answer 5

Я использовал для реализации HTMLElement.getElementByClassName(), но по крайней мере Firefox и Chrome, только найти половину элементов, когда эти элементы много, вместо этого я использую что-то вроде (на самом деле это большая функция):

getElmByClass(clm, parent){ 
    // clm: Array of classes 
    if(typeof clm == "string"){ clm = [clm] } 
    var i, m = [], bcl, re, rm; 
    if (document.evaluate) { // Non MSIE browsers 
     v = ""; 
     for(i=0; i < clm.length; i++){ 
     v += "[contains(concat(' ', @"+clc+", ' '), ' " + base[i] + " ')]"; 
     } 
     c = document.evaluate("./"+"/"+"*" + v, parent, null, 5, null); 
     while ((node = c.iterateNext())) { 
      m.push(node); 
     } 
    }else{     // MSIE which doesn't understand XPATH 
     v = elm.getElementsByTagName('*'); 
     bcl = ""; 
     for(i=0; i < clm.length; i++){ 
      bcl += (i)? "|":""; 
      bcl += "\\b"+clm[i]+"\\b"; 
     } 
     re = new RegExp(bcl, "gi"); 
     for(i = 0; i < v.length; i++){ 
     if(v.className){ 
      rm = v[i].className.match(bcl); 
      if(rm && rm.length){  // sometimes .match returns an empty array so you cannot use just 'if(rm)' 
       m.push(v[i]) 
      } 
     } 
     } 
    } 
    return m; 
} 

Я думаю, что будет более быстрый способ для перебора без XPATH, потому что RegExp медленно (возможно, функция .indexOf, она shuld быть проверено), но работает хорошо

Answer 6

Heres один я поставил вместе, надежным и, возможно, самым быстрым. Должен работать в любой ситуации.

function $class(className) { 
    var children = document.getElementsByTagName('*') || document.all; 
    var i = children.length, e = []; 
    while (i--) { 
     var classNames = children[i].className.split(' '); 
     var j = classNames.length; 
     while (j--) { 
      if (classNames[j] == className) { 
       e.push(children[i]); 
       break; 
      } 
     } 
    } 
    return e; 
}