Question

我有5个相同类别的div，但不同的id堆叠在一起。如何使用javascript遍历它们？它们被命名为div1，div2，div3等......

另外，如何在遍历时更改每个div的属性？

非常感谢你。

TAM。

Answer 1

在现代浏览器中，您可以使用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);
  }
}

Answer 2

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

编辑：我看到你称它为“命名”div1 ... div5，你必须给它id =“div1”才能使它工作

Answer 3

首先阅读这篇文章

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

Answer 4

您使用的是Prototype或jQuery吗？如果是这样，我强烈推荐其中之一，因为它们使遍历非常容易。例如，使用Prototype，它将是：

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

Answer 5

基于库的答案是显而易见的，但是如果你被禁止使用它们，here are a couple methods比使用Firefox（新的和光荣的！）document.getElementsByClassName更兼容。

Answer 6

它的一些工作要破解，但这里有一篇关于如何在旧浏览器中启用queryselectorAll的文章：

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

要在Mootools或Prototype中执行此操作：

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

在Jquery中，双重美元（由其他人发布）是相同的：

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

Answer 7

这是一个jQuery解决方案：

设置所有div的属性：

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

设置所有div的文本内容：

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

设置所有div的html内容：

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

可以在http://jquery.com/找到jQuery库。

遍历同一类的div

7 个答案: