обходить div того же класса

Question

У меня есть 5 div одного и того же класса, но разные ID складываются друг на друга как мне пройти их, используя JavaScript? они называются div1, div2, div3 и т. д.

также, как мне изменить атрибуты каждого div при обходе?

Большое спасибо.

ТАМ.

Answer 1

В современных браузерах вы можете получить их, используя функцию getElementsByClassName :

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

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

Обратите внимание, что я получаю elements.length только один раз, это обычная практика при итерации HTMLCollections.

Это потому, что эти коллекции являются "живыми", они могут изменяться в любое время, и доступ к свойству length на каждой итерации обходится дорого.

Для получения полной кросс-браузерной реализации, прочитайте эту статью Mr. Resig:

• Сравнение скорости getElementsByClassName

Редактировать: Я оставляю здесь переработанную версию 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

Это немного трудоемко, но вот статья о том, как включить 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 4

Ответы на основе библиотек очевидны, но если вы ограничены в их использовании, вот пара методов , которые более совместимы, чем использование Firefox (новых и великолепных!) document.getElementsByClassName.

Answer 5

Вы используете что-нибудь вроде Prototype или jQuery? Если это так, я настоятельно рекомендую один из них, поскольку они делают обход довольно простым. Например, с прототипом это будет:

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

Answer 6

Прежде всего, прочитайте эту статью

getElementsByClassName Сравнение скорости

и

Расширенный 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 каждый функция

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

Answer 7

Вот решение jQuery:

Установить атрибуты всех div:

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

Установить текстовое содержимое всех div:

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

Установить HTML-содержимое всех div:

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

Библиотека jQuery находится по адресу http://jquery.com/.