JS Prototype按类获取元素?

时间:2011-03-09 18:54:26

标签: javascript prototypejs

我得到了以下代码,我试图让它匹配一个类而不是一个id:

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”相匹配? 谢谢!

3 个答案:

答案 0 :(得分:22)

在原型中使用css selector

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

jsfiddle

答案 1 :(得分:9)

我认为你需要$$方法。它选择与CSS选择器严格匹配的DOM元素。在这种情况下,你想要

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

它按文档顺序返回所有匹配元素的列表。您可以通过索引访问它们,也可以使用each

等操作对它们进行操作

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

这就是Prototype的意义所在。 getElementById是oooold

答案 2 :(得分:3)

以下是一个工作示例,说明如何使用Prototype中的each循环遍历order-cc-charged类的所有元素。

var order_cc_charged = 0;

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