jQueryの覚書

プロパティ（属性）の追加および除去 | prop,removeProp

	$('#xxx').prop("checked",false);// checkedプロパティを要素から除去する。
	$('#xxx').prop("checked",true);// checkedプロパティを要素から除去する。
	

	$('#xxx').prop("animal","neko");

jQuery.UI | テーブル行を並べ替え

	<script src="jquery.min.js"></script>
	<script src="jquery-ui.min.js"></script>
	
	<script>
	$(function(){
		$('#sort1').sortable();
		$('#sort1').disableSelection();
	});
	</script>
	
	～省略～
	
	<table>
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody id="sort1">
			<tr><td>1</td><td>neko</td><td>猫</td></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
			<tr><td>5</td><td>goki</td><td>御器</td></tr>
	
		</tbody>
	</table>
	

参考先リンク

jQuery.UI | テーブル行を並べ替え：コールバック

	<script src="jquery-ui.min.js"></script>
	
	<script>
	$(function(){
		tbodyElm = $('#tbl1 tbody');
		tbodyElm.sortable();
		tbodyElm.disableSelection();

		// 並べ替え前に呼び出すコールバック関数。
		tbodyElm.bind('sortstart', function (e, ui) {
		
			// ドラッグ中の要素を取得
			var tr = $(ui.item);
	
			// indexを出力(並べ替える前の順番）
			console.log('前= ' + tr.context.sectionRowIndex);
	
			
		});
	
		// 並べ替え後に呼び出すコールバック関数。
		tbodyElm.bind('sortstop', function (e, ui) {
	
			// ドラッグ中の要素を取得
			var tr = $(ui.item);
	
			// indexを出力（並べ替えた後の順番）
			console.log('後= ' + tr.context.sectionRowIndex);
	
			
		});
	});
	</script>
	
	<table id="tbl1">
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>neko</td><td>猫</td></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
			<tr><td>5</td><td>goki</td><td>御器</td></tr>
	
		</tbody>
	</table>
	

表示順の入れ替え

	$('#a').before($('#b'));

	$('#a').after($('#c'));

関数版

	<script>
	// 「ヤンバルクイナ」を5番に移動するサンプル。
	function test1(){
		var groupSlt = "#animals div";
		var moveElm = $('#animal2');
		var indexTo = 4;
		changePlace(groupSlt,moveElm,indexTo);
	}
	
	
	/**
	 * 要素を入れ替え移動する
	 * 
	 * @note
	 * 引数のgroupSltである移動要素のグループセレクタは「移動要素の親セレクタ + 移動要素のタグ」を指定する。（グループをあらわすclass名でもよい）
	 *  
	 * @param groupSlt 移動要素のグループセレクタ
	 * @param moveElm 移動要素<jQueryオブジェクト>
	 * @param indexTo 移動先のインデックス
	 */
	function changePlace(groupSlt,moveElm,indexTo){
	
		// 移動元のインデックスを取得
		var indexFrom = $(groupSlt).index(moveElm);
		
		var neighbor = $(groupSlt).eq(indexTo);// 移動先の隣り要素
		
		// 移動先隣り要素の前後に対象要素を移動する
		if(indexFrom > indexTo){
			neighbor.before(moveElm);
		}else if(indexFrom < indexTo){
			neighbor.after(moveElm);
		}
	
	}
	</script>
	
	
	<input type="button" class="btn btn-success" value="test1" onclick="test1()" />
	<hr>
	<div id="animals">
		<div id="animal1">1  イリオモテヤマネコ</div>
		<div id="animal2">2  ヤンバルクイナ</div>
		<div id="animal3">3  イボイモリ</div>
		<div id="animal4">4  リュウキュウヤマガメ</div>
		<div id="animal5">5  ノグチゲラ</div>
		<div id="animal6">6  ムラサキ オカヤドカリ</div>
	</div>
	

要素を削除する | jquery.remove

$('#xxx').remove();

要素数を取得する | jQuery

	var len1 = $('.test1').length;

親要素内からname属性またはclass属性を指定して要素を取得する

	/**
	 * 親要素内からname属性またはclass属性を指定して要素を取得する
	 * @param parElm 親要素
	 * @param key name属性名またはclass属性名
	 * @return 要素<jquery object>
	 */
	function getElmByNameOrClass(parElm,key){
		var elm = parElm.find("[name='" + key + "']");
		if(!elm[0]){
			elm = parElm.find('.' + key);
		}
		return elm;
		
	}
	

親要素内からname属性またはclass属性を指定して値を取得する

	/**
	 * 親要素内からname属性またはclass属性を指定して値を取得する
	 * @param parElm 親要素
	 * @param key name属性名またはclass属性名
	 * @return 値
	 */
	function getValueByNameOrClass(parElm,key){
		var v = undefined;
		var elm = parElm.find("[name='" + key + "']");
		if(elm[0]){
			v = elm.val();
		}else{
			elm = parElm.find('.' + key);
			if(elm[0]){
				v = elm.text();
			}
		}
		return v;
	}
	

指定要素を数える | jQuery

	$('.xxx').length;

テーブルの行数を数える

let row_count = $('#tbl1 tbody tr').length;

let row_count = $('#tbl1').find('tbody tr').length;

サンプル1

	var rowCnt = $('#tbl1').children('tbody').children('tr').length;
	

サンプル2

	var tbl = $('#tbl1');
	var tBody = tbl.children('tbody');
	var rowCnt = tBody.children('tr').length;// テーブル行数
	

TEST