JS Prototype получить элемент по классу?

У меня есть следующий код, и я пытаюсь сопоставить его с классом, а не с идентификатором:

Html: 

<div id='testdiv'>
    <div class="lol">
        [First Title|<a class="external" href="http://test.com">http://test.com</a>]
        Another line
        [Second Title|<a class="external" href="http://test.com">http://test.com</a>]
        More text
        [Third Title|<a class="external" href="http://test.com">http://test.com</a>]
    </div>
</div>

Javascript: 

var textContainer = document.getElementById("testdiv");
var linkText = textContainer.innerHTML;
var pattern = /[([^|]+)|([^>]+.?)[^<]*(</a>)]/g;
var result = linkText.replace(pattern, "$2$1$3");

textContainer.innerHTML = result;

Полный пример: http://jsfiddle.net/JFC72/17/

Как я могу сделать так, чтобы он соответствовал "myclass" вместо этого? Спасибо!

4 9
javascript prototypejs

4 ответа:

Используйте CSS селектор в прототипе. 

var textContainer = $$('div.myclass')[0];

Jsfiddle

22

Я думаю, что вам нужен метод $$. Он выбирает элементы DOM, соответствующие строгому селектору CSS. В этом случае вы хотите 

var elements = $$('.myclass');

Возвращает список всех совпадающих элементов в порядке следования документов. Вы можете получить к ним доступ по индексу или работать со всеми ними с помощью таких вещей, как each

Http://www.prototypejs.org/api/utility

Вот что такое прототип. getElementById-это oooold

9

Вот рабочий пример того, как вы могли бы использовать each в прототипе для циклического перебора всех элементов с классом order-cc-charged.

var order_cc_charged = 0;

$$('order-cc-charged').each(function (elem) {
   order_cc_charged += parseFloat($('order-cc-charged').innerHTML);
});
3

Разница между классом и идентификатором в том, что только один элемент может иметь один и тот же идентификатор, но больше элементов могут иметь один и тот же класс.

Йо Если вы хотите выбрать элементы с тем же классом, вы должны думать о том, что не всегда есть один элемент 

onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}
}

Я надеюсь, что это сработает.

Можно также использовать селектор классов jquery http://api.jquery.com/class-selector/

0