9

シンプルに聞こえますね。私が見つけた答えはたくさんありますが、すべてjQueryまたはProtoTypeを使用しています。プレーンなJavaScriptが欲しいです。それほど難しいことではないはずですが、JavaScriptは私のものではありません。中央のドキュメントがないということは、年齢を検索し、私が欲しいものを見つけられないことを意味します。

次のHTMLコードスニペットについて考えてみます。

<div class="central_0"> .. </div>
<div class="central_1"> .. </div>
<div class="central_2"> .. </div>

ここで、JavaScriptを使用してこれらのDIVで処理を実行したいと思います。

function processDivElements()
{
 // search for relevant DIV classes
 var divArray = document.getElementsByClass.regex('/^central_.*$/');

 // do stuff with the DIV elements found
 foreach (divArray as divElement)
 {
   divElement.style.background = '#f00';
 };
}

誰かがこれを適切なプレーンJavaScriptに翻訳するのを手伝ってもらえますか？IDではなくクラスを使用します。私は正規表現を使うのが好きです。

4

4 に答える 4

13

jQuery ソリューションは非常に優れています。

var $divs = $('div[class^="central_"]');

新しいブラウザのみをサポートしたい場合は、 を使用document.querySelectorAll()して基本的に同じことを行うことができます。

var divs = document.querySelectorAll('div[class^="central_"]');

古いブラウザをサポートしたい場合、コードは恐ろしいものになります:

var all_divs = document.getElementsByTagName('div');
var divs = [];

for (var i = 0; i < all_divs.length; i++) {
    var div = all_divs[i];

    if (div.className.match(/^central_\d+$/) {
        divs.push(div);
    }
}

また：

ID ではなく、クラスを使用します。私は正規表現を使用することを好みます。

クラスは一意であり、実際には ID のように機能していますが、これは実際にはクラスの意図された用途ではありません。代わりに、次のように HTML を構成します。

<div id="central_0" class="central">...</div>
<div id="central_1" class="central">...</div>
<div id="central_2" class="central">...</div>

これで、JavaScript はより単純になります。

var $divs = $('.central');                               // jQuery
var divs =  document.querySelectorAll('.central');       // Newer browsers
var divs =  document.getElementsByClassName('central');  // Older browsers
于 2012-12-08T07:00:09.777 に答える
2

getElementsByClassName他の人が述べたように、メソッド呼び出しで正規表現の選択を直接サポートすることはできません。

しかし、あなたは JavaScript を初めて使用するので、コードに関するこれらの他の問題を指摘します。

クラスを使用することは問題ありませんが、そのように html を作成することで、より多くの作業を行うことができます。

central_0....central_2それらがすべて基本的に同じ css ルールで動作している場合の代わりに、このように記述してcentral zero....central two、centralクラスに同一のルールを設定し、クラスに違いを割り当てることができ#ます。このようにして、 DRY の原則も順守します。

また、言語のベストプラクティスに固執することを本当に検討する必要があります. これらのクラスを使用して要素に css ルールを割り当てていない場合は、 を使用する必要がありid'sます。

于 2012-12-08T07:08:35.267 に答える
1

一致した要素を正規表現で直接取得する方法はありません。できることは、すべての要素を何か (TagName、Name など) で取得してから、正規表現で要素をフィルター処理することだけです。

あなたのhtmlサンプルでは、​​TagNameによってすべての要素を取得し、正規表現を使用して正規表現でチェックすることしかできませんでしたclassName。

于 2012-12-08T07:01:47.783 に答える