getElementsByClassName IE解析问题

发布于 2024-10-07 02:09:22 字数 876 浏览 9 评论 0原文

我在弄清楚如何解决 IE 中的 getElementsByClassName 问题时遇到问题。我如何最好地在我的代码中实现罗伯特·尼曼(无法发布链接,因为我的代表只有 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)。任何提示将不胜感激。

I am having issues figuring out how to resolve the getElementsByClassName issue in IE. How would I best implement the robert nyman (can't post the link to it since my rep is only 1) resolution into my code? Or would a jquery resolution be better? my code is

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

and I am using it on this page dev.msmnet.com/services/practice-management to show/hide the description for each service (works in Chrome and FF). Any tips would be greatly appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

痕至 2024-10-14 02:09:22

我很好奇你的函数的 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;
    }
}

I was curious to see what a jQuery version of your function would look like, so I came up with this:

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;
    }
}
茶底世界 2024-10-14 02:09:22

这应该支持多个类。

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

然后尝试像这样更改它...

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') { }

This should support multiple classes.

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;

}

You can pass in a parent too, to make its searching the DOM a bit faster.

If you want getElementsByClassName('a c') to match HTML <div class="a b c" /> then try changing it like so...

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 you want this function to only be available if it doesn't already exist, wrap its definition with

if (typeof document.getElementsByClassName != 'function') { }
无名指的心愿 2024-10-14 02:09:22

更简单的 jQuery 解决方案:

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

如果您使用 jQuery,为什么还要费心使用 show 类呢?

Even easier jQuery solution:

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

Why bother with a show class if you are using jQuery?

眸中客 2024-10-14 02:09:22

这是我整理的一个,可靠而且可能是最快的。应该在任何情况下都能工作。

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

Heres one I put together, reliable and possibly the fastest. Should work in any situation.

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;
}
日记撕了你也走了 2024-10-14 02:09:22

我曾经实现 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 的函数,应该对其进行测试),但它运行良好

I used to implement HTMLElement.getElementByClassName(), but at least Firefox and Chrome, only find the half of the elements when those elements are a lot, instead I use something like (actually it is a larger function):

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

I think there would be a faster way to iterate without XPATH, because RegExp are slow (perhaps a function with .indexOf, it shuld be tested), but it is working well

如果没有你 2024-10-14 02:09:22

您可以将 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")

You can replace getElementsByClassName() with the following:

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

Then you can use it like this:

getbyclass("description") // Instead of document.getElementsByClassName("description")
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文