- ベストアンサー
JavaScriptでHTMLのclass名取得
- JavaScriptを使用してHTMLのclass名を取得する方法について説明します。
- HTMLのclass名を大文字で始まる単語で区切り、配列に格納する方法を紹介します。
- キャメルケースで単語が繋がっている場合のHTMLのclass名の取得方法について質問しています。
- 山 まこと（@yama-maron）
- お礼率75% (82/109)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- sanzero
- ベストアンサー率56% (58/102)
JavaScriptでHTMLのclass名を取得し、配列に入れたいと思っております。 何をするためでしょうか？
お礼
sanzero様 ご回答いただきまして、ありがとうございます。 HTML上に商品の一覧を表示させておりまして、商品の名前や値段等を商品ごとに囲っている<li>タグのクラスに設定し、それを元に表示・非表示や並び替えを行いたいと思っております。 例としまして、以下のようなHTMLとなります。 <li class="商品A 1,000円 家電"> 半角スペースで1つの商品に対して複数のクラスを設定しており、1つ目のクラスは商品名、2つ目は値段、3つ目はカテゴリ、といった形でユーザがどの条件で調べたいか指定した際、何番目のクラス名を元に絞り込み等をすればよいか、クラス名をそれぞれ配列に入れて以降プログラムで処理をする必要があるかと思っておりました。 ご質問させていただきました件につきまして、キャメルケースからスネークケースへの変換を行い、対応することができました。 ご回答いただきまして、ありがとうございました。
- think49
- ベストアンサー率59% (285/482)
lowerCamelCase を単語分割するなら split が使えますね。 http://jsfiddle.net/xxqpeaL6/ ただ、class="test Test" にすれば classList で参照できますし、class="test-Test" にすれば [class|=Test] のセレクタで参照できるので、特別な理由がなければその管理法はお勧めしませんが…。 # Re: yama-maronさん
お礼
think49様 ご回答いただきまして、ありがとうございます。 わざわざ別ページにてソースコードをご提示いただきまして、 大変恐縮です。 ご質問させていただきました件につきまして、 キャメルケースを一度スネークケースに変換し、それからプログラムで処理をする流れで解決することができましたが、私が書いたソースよりもはるかに短く、分かり易いコードで勉強になりました。 ご教授いただきまして、ありがとうございました。
関連するQ&A
- PHPとJavascriptの連携
こんにちは。 PHPとJavascriptの連携について質問があります。 ↓のコードは、 （１）PHPの側で、test.csvというＣＳＶファイルからデータを配列に読み込み、 （２）その配列データをJavascriptに渡し、 （３）カウンター番号の配列データをHTMLのTextに表示させる という流れを意図したものです。 しかし、$question[]配列がJavascriptにうまくわたっていないようで、エラーになります。 発想自体に問題があるのか、表現の仕方がまずいのか、ご指摘いただきたくよろしくお願い申し上げます。 *************************************↓コード <script language="Javascript"> var $question = new Array(); var n = 0; function disp() { document.myform.mytext.value = $question[n]; //Textに$question[n]を表示させる n++; } </script> //------------------------------------------------------------------------ <form name="myform" > <input name="mytext" type="text"><br> <input name="mybutton" type="button" value="click" onclick="disp(this)"> </form> //------------------------------------------------------------------------ <?php $fp = fopen("test.csv", "r"); //CSVファイルを開く $count = 0; //カウンターを初期化する while(!(feof($fp))) //ファイルの終端まで読み込む { $buf = fgets($fp, 1024); $buf = chop($buf); //文末にある改行文字を削除する $data = split(",", $buf); // , ごとに区切って配列に格納する $question[$count] = $data[0]; //question[]配列に$data[0]を格納する $answer[$count] = $data[1]; //answer[]配列に$data[1]を格納する $count++; //カウンターを1進める } fclose($fp); ?>
- ベストアンサー
- PHP
- 表示するページ毎にhtml上のclass名をJavaScriptで変更するには？
<div class="default">テキスト内容</div> 上記のようなHTMLが、全ページに共通で入っているという前提で 『http://www.アドレス.com/』を表示している時のみ <div class="toppage">テキスト内容</div> と、言うようにclass名を JavaScriptで変更する事は可能でしょうか？ ■例： http://www.アドレス.com/ → class="toppage" http://www.アドレス.com/contact/ → class="default" http://www.アドレス.com/company/ → class="default"
- ベストアンサー
- HTML
- JavaScript で配列の終わりまでループ
JavaScript で配列の終わりまでループを回すには どうしたらいいのでしょう？ perl であれば foreach (@test) { 処理 } ですよね。。。test.length; で要素数を取得する以外で 方法はないでしょうか。 new Array を使って、２次元配列(のようなもの) を 作って格納してしまったので、test[0][*], test[1][*] それぞれの要素数を調べたいのです。 現状だと test[0][*], test[1][*] ２つの合計値が 返ってしまいます。
- ベストアンサー
- JavaScript
- jQueryでHTML表示の部分
jQueryで表示されるデータをHTMLで表示するのですが、 色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、 いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No：1 Title：タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、 どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No：1 Title：タイトル</li> ----------------------------------- こんな感じに表示させたいのです。 大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+' Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> <div id="demo"> <h4>リスト</h4> </div>
- ベストアンサー
- JavaScript
- 特定のHTML箇所をJavaScriptのdocument.write("");で表示させたい
外部JS化する前のテスト段階で、特定のHTML箇所をJSで表示させるにあたり、エラーになってしまいます。 下記部分 -------------------------------------------------- <li class='off' onmouseover="this.className='on'" onmouseout="this.className='off'" title='テスト'><A href='./test.html'>テスト</a> -------------------------------------------------- を下記のようにしてみているのですが、 -------------------------------------------------- document.write("<li class='off' onmouseover="+this.className='on'+" onmouseout="+this.className='off'+" title='テスト'><A href='./test.html'>テスト</A>"); -------------------------------------------------- FireFoxのエラーコンソールで確認すると this.className= --------------↑ の、=の後の部分が指摘されております。 どのようにすればエラーを回避出来ますでしょうか。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- cssのclassについて
よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？ きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- ＭＴテンプレートタグをＨＴＭＬタグ内に記入できる？
(1)<ul><mt:TopLevelCategories> <li><$mt:CategoryLabel$></li> </mt:TopLevelCategories></ul> (1)は「カテゴリ名をリスト形式で出す」ムーバブルタイプのプログラムです。 リストの１番目だけ、「class="selected"」でクラス属性を付加したいです。 (2)<MTSubCatIsFirst>class="selected"</MTSubCatIsFirst> (2)は、各カテゴリの始めに１回だけ実行するタグで「class="selected"」を打ち出しています。 (3)<ul><mt:TopLevelCategories> <li <MTSubCatIsFirst>class="selected"</MTSubCatIsFirst> ><$mt:CategoryLabel$></li> </mt:TopLevelCategories></ul> (3)の様に記述したいのですが、ＨＴＭＬタグ内にＭＴテンプレートタグを、入れ子で書く事になります。 エスケープシーケンスを使わなければいけませんか？
- 締切済み
- ブログ
- JavaScript→HTMLへ値渡しする方法
お世話になります。 JSPファイル内のJavaScriptで調べた値を、 同じJSPファイル内のHTMLへ値を渡して、 その値をHTML内のIF文で判断して、 HTMLの表示画面内容を、 大まかには、以下のサンプルソースのような流れで 変更したいです。 <script language="JavaScript" type="text/javascript"> <!-- function getInfoAgentUser(){ var agent_user = navigator.userAgent.toLowerCase(); var WinOs = agent_user.indexOf("win") != -1; // 文字列に、"win"が含まれているケース var Msie = agent_user.indexOf("msie") != -1; // 文字列に、"msie"が含まれているケース var errFlg = ""; if(WinOs){ if(Msie){ errFlg = "0"; }else{ errFlg = "1"; } }else{ errFlg = "2"; } } //--> </script> </head> <body onLoad="getInfoAgentUser()"> <c:if test="${errFlg == 1}"> <h1>ブラウザエラー</h1> <div class="main"> <p><c:out value="Internet Explorerを利用してください" /></p> </div> </c:if> <c:if test="${errFlg == 2}"> <h1>OSエラー</h1> <div class="main"> <p><c:out value="Windows XP以上を利用してください" /></p> </div> </c:if> 上記のサンプルソース内の、 JavaScript内のIF文で判断した「errFlg」変数の値を、 <body ～以下で、 <c:if test="${errFlg == 1}"> みたいに判断し分岐して、 HTMLの表示画面内容を 変更したいです。 どのようにすれば、上記の「errFlg」変数の値を JavaScript→HTMLへ値渡し出来るのでしょうか？ 以上になります。 ご存じの方がいらっしゃいましたら教えてください。 宜しくお願いします。
- ベストアンサー
- JavaScript
- Ajax.Requestで取得したHTMLソースから'href'の値を
Ajax.Requestで取得したHTMLソースから'href'の値を取得する方法について Javascriptにて取得した別ページのHTMLタグから 必要な部分のみ値を取得し、配列に格納することは可能でしょうか？ 以下Javascript ------ var url = "http://test/index.htm"; new Ajax.Request( url, { "method":"get", asynchronous:false, onComplete: function(request) { html = request.responseText; } } ); alert(html); ------ 以下"http://test/index.htm"のHTMLタグ ------ <html> <head> </head> <body> <a href='http://test/index2.htm'>index2</a> <a href='http://test/index3.htm'>index3</a> <div>index4</div> </body> </html> ------ 上記で"http://test/index.htm"のHTMLタグの全てを取得して出力することはできたのですが、 "href"の"http://test/index2.htm" "href"の"http://test/index3.htm"のみ配列に格納したいのです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
Hanagefactory様 ご回答いただきまして、ありがとうございます。 載せていただきました参考URLにつきまして、 とても参考になりました。 参考にしつつ、仰るとおりキャメルケースの状態からまずスネークケースへ変換を行い、 splitで配列に入れることで解決することができました。 迅速なご回答のほど、ありがとうございます。