JQueryの覚書 | 要素関連の一律化

親要素からclass属性、name属性、id属性を問わずに一致する要素を探す


	/**
	 * 親要素からclass属性、name属性、id属性を問わずに一致する要素を探す
	 * @param parElm 親要素
	 * @param field フィールド
	 * @returns 要素
	 */
	function _findInParentEx(parElm,field){
		var elm = parElm.find('.' + field);
		if(!elm[0]){
			elm = parElm.find("[name='" + field + "']");
		}else if(!elm[0]){
			elm = parElm.find('#' + field);
		}
		return elm;
	}

2017-3-3

フィールドを指定してフォーム要素（親要素）から値を取得する

	/**
	 * フィールドを指定してフォーム要素から値を取得する
	 *
	 * @note
	 * フィールド名に一致する要素を探し出す。（class属性、name属性、id属性のいずれかで一致）
	 * 要素の種類を問わず値を取得する。
	 *
	 * @param form フォーム
	 * @param field フィールド
	 * @returns 値
	 */
	function _getValueFromForm(form,field){
		var elm = _findInParentEx(form,field);
		
		if(!elm[0]){
			throw new Error("Not '" + field + "' in form!");
		}
		
		var v = _getValueEx(elm);
		
		return v;
	}

2017-3-3

要素の種類を問わずに値をセットする | _setValueEx

set_value_ex関数はさまざまな要素へ、一律な方法で値をセットすることができる。
対応している要素は、テキストボックス、チェックボックス、ラジオボタン、テキストエリア、セレクト、IMG、Audio、一般HTML要素（DIVなど）である。
テキストエリアは\nや<br>などの改行に対応している。一般HTML要素も同様に改行に対応しており、さらにXSSサニタイズも自動的に行われる。

ソースコード


	/**
	 * 要素の種類を問わずに値をセットする
	 * @param elm 要素(jQueryオブジェクト）
	 * @pramm v 値
	 * @version 1.0
	 */
	function _setValueEx(elm,v){
		
		var tagName = elm.get(0).tagName; // 入力要素のタグ名を取得する
		
		// 値を入力フォームにセットする。
		if(tagName == 'INPUT' || tagName == 'SELECT'){
			
			// type属性を取得
			var typ = elm.attr('type');
			
			if(typ=='checkbox'){
				if(v ==0 || v==null || v==''){
					elm.prop("checked",false);
				}else{
					elm.prop("checked",true);
				}
				
			}
			
			else if(typ=='radio'){
				var f = elm.attr('name');
				var parElm = elm.parent();
				var opElm = parElm.find("[name='" + f + "'][value='" + v + "']");
				if(opElm[0]){
					opElm.prop("checked",true);
				}
	
			}
			
			else{
				
				if(typeof v == 'string'){
					v = v.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
				}
				
				elm.val(v);
			}
	
			
		}
		
		// テキストエリア用のセット
		else if(tagName == 'TEXTAREA'){
	
			if(v!="" && v!=undefined){
				v=v.replace(/<br>/g,"\r");
				
				if(typeof v == 'string'){
					v = v.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
				}
			}
	
			elm.val(v);
			
		}
		
		// IMGタグへのセット
		else if(tagName == 'IMG'){
			// IMG要素用の入力フォームセッター
			elm.attr('src',v);
			
		}
		
		// audioタグへのセット
		else if(tagName == 'AUDIO'){
			elm.attr('src',v);
			
			
		}else{
			if(v!="" && v!=undefined){
				v=v.replace(/<br>/g,"\r");
				if(typeof v == 'string'){
					v = v.replace(/</g, '&lt;').replace(/>/g, '&gt;');
				}
				v = v.replace(/\r\n|\n\r|\r|\n/g,'<br>');// 改行コートをBRタグに変換する
			}
			
			elm.html(v);
		}
	
		
	}

使い方

デモ


	// テキストボックス
	var tbElm = $('#text1');
	_setValueEx(tbElm,'いろは')
	
	
	// チェックボックス
	var checkbox1 = $('#checkbox1');
	_setValueEx(checkbox1,1); // 1以上の数値や、trueを指定可能
	var checkbox2 = $('#checkbox2');
	_setValueEx(checkbox2,0);// falseやnullでも指定可能
	
	// ラジオボタン
	var radio1 = $("[name='radio1']");
	_setValueEx(radio1,2);
	
	// テキストアリア
	var textarea1 = $('#textarea1');
	var msg = "ネコ\n<input />\nヤギ\nカニ<br>サメ\rシカ\r\nゴリラ";
	_setValueEx(textarea1,msg);
	
	// セレクトボックス
	var select1 = $('#select1');
	_setValueEx(select1,2);// nullや空文字をセットすると未選択になる。 
	
	// IMG
	var img1 = $('#img1');
	_setValueEx(img1,'imori.png');
	
	// AUDIO
	var audio1 = $('#audio1');
	_setValueEx(audio1,'audio1.mp3');
	
	// ブロック
	var div1 = $('#div1');
	var msg = "ネコ\n<input />\nヤギ\nカニ<br>サメ\rシカ\r\nゴリラ";
	_setValueEx(div1,msg);

2017-3-6

フィールドを指定してフォーム要素（親要素）に値をセットする | _setValueFromForm


	/**
	 * フィールドを指定してフォーム要素（親要素）に値をセットする
	 * @param form フォーム
	 * @param field フィールド
	 * @param value 値
	 * @returns 値
	 */
	function _setValueFromForm(form,field,value){
		var elm = _findInParentEx(form,field);
		
		if(!elm[0]){
			throw new Error("Not '" + field + "' in form!");
		}
		
		// 要素の種類を問わずに値をセットする
		_setValueEx(elm,value);
		
	}