人気ブログランキング |
2012年 11月 18日 ( 4 )
(jQuery)同じクラス名のオブジェクトを一斉操作
jQueryでは、セレクタとして #id名 を使うことが多いかもしれませんが、クラスを指定することも出来ます。
クラスは .クラス名 で指定すると、そのクラス名のものを配列として扱います。

以下のようなクラス名 test,test2 を持つDIV要素とinputボタンがあるとします。
<input type="button" id="chgcolor" value="色チェンジ" >
 
<div id="test01" class="test">aaa</div><br>
<div id="test02" class="test">bbb</div><br>
<div id="test03" class="test">ccc</div><br>
<div id="test04" class="test2">eee</div><br>


inputボタンを押下すると、testのクラス名のDIVの文字色を赤に変えるという操作をするには、jQueryを使うと以下のように出来ます。
$(function(){
$("#chgcolor").click(function(){ //inputボタン押下時のイベントハンドラ
//testクラスを持つ要素をループ
$(".test").each(function(){
//文字色変更
$(this).css("color", "red");
});
 
/* 以下のようにもできる。
var selcts = $(".test");
for ( var i=0 ; i<selcts.length ; i++){
//文字色変更
$(selcts[i]).css("color", "red");
}*/

});
});

by Jehoshaphat | 2012-11-18 22:01 | Webがらみ
(JavaScript)Uniformを使うとselect要素の値がjQueryから操作できない
(Ajax,PHP)Ajaxを使って入力フォームに戻ったときに値を再セットするで入力フォームに戻ったときに値を再設定する方法を書きました。
しかし、フォームのデザインを良くするために、Uniformを使うと、select タグの表記が変わりません。
(Uniformについては、(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS 参照)

Firebugで見ると、実際のselectタグは変わってるようなんですが、Uniformでタップして表示している部分が変更されないようです。
(Uniformはselectタグの実体は非表示にし、selectedが付いているテキストを span タグ内で表示するような仕様になっています。)

ということで、値をフォームに再セットするときに、Uniform側のテキストも変更するようにするため、下記のようにコードを直してみました。
(uniformのid名は,既存のid名の前に、"uniform-" という文字列をつけるだけという仕様を使ってます。また、各タグのid名とnameの値は同じにしています。)
function SetValue(){
$.getJSON(
"GetInputData", //アクセス先
function(data,status){
if ( data ){
for (var key in data) {
$("*[name=" + key + "]").val(data[key]) ;
//selectタグなら
if ( $("*[name=" + key + "]")[0].nodeName == "SELECT" ){
//uniform
$("#uniform-" + key).children("span").html( $("*[name=" + key + "]").children(':selected').text() );
}
}
}
}
);
}

by Jehoshaphat | 2012-11-18 21:36 | Webがらみ
(jQuery)ID名,セレクトタグの選択値の取得方法
jQueryで、$(this) を使って操作していると、こいつのIDは何だっけ?って時があります。
以下のようにすれば id 名を取得できるようです。
$(this).attr("id");

要は、idも属性の一つということですね。


また、selectタグで、現在選択している値を取得するには以下のようにすればいいようです。
$("#hoge").val()
$('#hoge').children(':selected').val();



値ではなく、テキストはvalを text に変えればいいようです。
$("#hoge").text()
$('#hoge').children(':selected').text();


参考:
jQueryでオブジェクトのid名を取得する方法 for WEB屋
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
by Jehoshaphat | 2012-11-18 20:42 | Webがらみ
(JavaScript)jQueryで選択した要素のタグ名を取得したい
jQueryでidやnameを使って要素を選択しますが、選択した要素のタグを知る方法です。
以下のようにすればいいようです。


●HTML側
<select id="hoge" name="hoge">
<option value="1"> hoge1</option>
<option value="2"> hoge2</option>
<option value="3"> hoge3</option>
</select>
<input type="button" onclick="return getTagName()" value="タグゲット">



●JavaScript側
function getTagName(){
alert( $("#hoge")[0].nodeName );
}

実行結果は "SELECT" となります。


参考:
javascript or JQuery でタグ名(node名)取得 メモ | MatsudaPress
by Jehoshaphat | 2012-11-18 00:33 | Webがらみ