web-dev-qa-db-ja.com

JSプロトタイプはクラスごとに要素を取得しますか？

次のコードを取得し、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」で一致させるにはどうすればよいですか？ありがとう！

javascriptprototypejs
10
FLX

プロトタイプで cssセレクター を使用します。

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

jsfiddle

22
bwest

$$メソッドが必要だと思います。 CSSセレクターstrictに一致するDOM要素を選択します。この場合、あなたは

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

一致するすべての要素のリストをドキュメント順に返します。インデックスを作成するか、eachなどを使用してすべてを操作することで、これらにアクセスできます。

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

これがプロトタイプの目的です。 getElementByIdはooooldです

9
jon_darkstar

これは、プロトタイプでeachを使用して、クラスがorder-cc-chargedのすべての要素をループする方法の実用的な例です。

var order_cc_charged = 0;

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