Home > JavaScript > JavaScriptで特定の文字列を含む ID のみを取得したい

JavaScriptで特定の文字列を含む ID のみを取得したい

  • Posted by: zaru
  • 2007年9月20日 12:21
  • JavaScript

たとえば、hoge_1 / hoge_2 / hoge_3 .... hoge_n と特定の文字列「hoge」が必ず含まれている連番IDのボックスがあって、そいつらだけJavaScirptで操作したいなーという時の方法。

こんなHTMLがあったとする

<select id="page">
	<option value="1">1ページ目</option>
	<option value="2">2ページ目</option>
</select>

<select id="hoge_1">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

<select id="hoge_2">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

<select id="hoge_3">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

一番上の id="page" は表示しておいて、id="hoge_n" は全て非表示にしたい!とかいう場面…けっこうある。と思う。たぶん。selectタグが全て id="hoge_n" だったら、document.getElementsByTagName('select') でタグ全てを取得すれば良いんだけど、そんなの非現実的だし、後から同じタグだけど別の役割を持たせているコードを入れた瞬間に正しく動作しなくなる。

じゃあマッチさせてみよう

というわけで、document.getElementsByTagName('select') で全ての selectタグを取得した後、ID名が指定のもの(今回は hoge )にマッチするかどうかを判定すれば良い。

<script type="text/javascript">
window.onload = function(){
	var parents = 'hoge_';
	selectObj = document.getElementsByTagName('select');
	matchObj= new RegExp(parents);
	
	for(i=0; i < selectObj.length; i++){
		if(selectObj[i].id.match(matchObj)){
			selectObj[i].style.display = "none";
		}
	}
}
</script>

こうすれば selectタグの中の ID名に「hoge_」を含むものだけを style.display = "none" にできる。

逆に個別に指定して表示したい時は document.getElementById('hoge_1').style.display = "inline" とすればできる。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/347
Listed below are links to weblogs that reference
JavaScriptで特定の文字列を含む ID のみを取得したい from Webプログラマー+WebデザイナーなZARU日記

Home > JavaScript > JavaScriptで特定の文字列を含む ID のみを取得したい

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top