遍历同一类的DIV

首先阅读这篇文章

getElementsByClassName Speed Comparison

和

Enhanced getElementsByClassName

var elements = document.getElementsByTagName("div");

for ( var i = 0; len = elements.length; i < len; i ++ )
{
    if ( elements[i].className === "yourclassname" )
    {
        // change the desired attribute of element.
        //Eg elements[i].style.display = "none";
    }
}

使用jQuery each 功能

$(".yourclassname").each ( function() {
    // $(this) will fetch the current element
});

在现代浏览器中,您可以使用 getElementsByClassName 功能:

var elements = document.getElementsByClassName('myClass');

for (var i = 0, n = elements.length; i < n; i++) {
  //..
}

注意,我正在 elements.length 只有一次,这是迭代HTMLCollections时的常见做法。

这是因为这些集合是“活动的”,它们可以随时更改,并且在每次迭代中访问length属性非常昂贵。

有关完整的跨浏览器实现,请参阅Resig先生的这篇文章:

• getElementsByClassName Speed Comparison

编辑: 我把一个重构版本的 Dustin Diaz GetElementsByClassName跨浏览器纯DOM实现:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

for(var i = 1; i++; i<=5){
    var div = document.getElementById("div" + i);
    //do stuff with div
}

编辑:我看到你称它为“命名的”div1…div5,你必须给id=“div1”也让它工作

您使用的是原型还是jquery?如果是这样,我强烈推荐其中一个,因为它们使遍历非常容易。例如,对于原型,它将是:

$$('.className').each(function(s) {
    //what you want to do
});

基于库的答案是显而易见的,但是如果你被限制使用它们, here are a couple methods 这比使用火狐更兼容(新的和光荣的!) document.getElementsByClassName .

这是一项很难的工作,但这里有一篇关于如何在旧浏览器中启用queryselectorall的文章:

http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed

在moootools或原型中执行此操作:

 $$('.className').each(function(element, index) {
   //what you want to do
 });

在jquery中,它与双美元(其他人发布的)相同:

 $('.className').each(function() {
   //what you want to do
 });

以下是jquery解决方案:

设置所有div的属性:

$(".yourclassname").attr("attribute","value");

设置所有分隔符的文本内容:

$(".yourclassname").text("New content");

设置所有div的HTML内容:

$(".yourclassname").html("<h1>New content</h1><p>blah blah blah</p>");

jquery库位于 http://jquery.com/ .