jqueryセレクタ

１．タグ名 or クラス名 or ID による指定ができる。

$("form");       // タグ名="form"
$(".className"); // クラス名="className"
$("#formId");    // ID="formId"


２．複合条件の指定

・AND 指定

$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1"
$("ul#listId1");    // タグ名="ul" and ID="listId1"

・OR 指定

$("div,.listClass1"); // タグ名="div" or クラス名=listClass1
$("ul,#divId1");      // タグ名="ul"  or ID="divId1"


３．階層関係の指定

・親-子関係

$("#root > .node");         // 「ID="root"」を親に持つ「クラス名="node"」
$(".node").parent("#root"); // 「クラス名="node"」の親のうち「ID="root"」の要素

・先祖-子孫関係

$("#root .node");            // 「ID="root"」を先祖に持つ「クラス名="node"」
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素

兄-弟関係

$(".node").siblings(); // 「クラス名="node"」の兄弟（自分を除く）


４．フィルタ

・属性

$('input[name]');          // タグ名="input" and name属性を持つ
$('input[name="quiz1"]');  // タグ名="input" and name属性が"quiz1"と一致
$('input[name!="quiz1"]'); // タグ名="input" and name属性が"quiz1"と不一致
$('input[name^="quiz1"]'); // タグ名="input" and name属性が"quiz1"と先頭一致
$('input[name$="quiz1"]'); // タグ名="input" and name属性が"quiz1"と末尾一致
$('input[name*="quiz1"]'); // タグ名="input" and name属性が"quiz1"と部分一致

・使用可否

$('input[type="text"]:enabled');   // 入力可能テキストボックス
$('input[type="text"]:disabled');  // 入力禁止テキストボックス

・選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked');    // 選択済ラジオボタン
$('select > option:selected');       // リストボックス・コンボボックス内の選択済要素

・可視性

$('div:hidden');    // 不可視状態になっているdiv要素（display:noneも含む）
$('input:hidden');  // 不可視状態になっているinput要素≒$('input[type="hidden"]');
$('div:visible');   // 可視状態になっているdiv要素
なお、単純な":hidden"だとhead,title,scriptタグ等にもマッチする可能性がある。

JQueryで親要素、子要素、孫要素を取得する

JQueryを使って、親要素や子要素、孫要素を取得する方法

◾︎親要素の取得

1	$('セレクタ').parent('条件');

指定したセレクタのすぐ上の親要素を取得します。
$('#example').parent('div');
#exampleの親要素がdivだったら親要素が取得できます。でなければnoneを返します。

1	$('セレクタ').parents('条件');

.parentと違い、指定したセレクタの親よりさらに上の要素を取得できます。
$('#example').parent('.sample');
#exampleより上の.sampleと名前がついたclassを取得します。

1	$('セレクタ').closest('条件');

指定したセレクタから最も近い親要素を取得します。引数に条件を指定した場合、マッチする最も近い親要素を返します。一致しない場合は、noneを返します。
$('#example').closest('div');
#exampleより最も近いdivを取得します。間に他の要素があっても無視されます。

◾︎子要素の取得

1	$('セレクタ').contens();

指定したセレクタのテキストノードも含めた全子要素を取得します。※条件はしていできません
※テキストノードとはタグ要素以外の文字要素のこと（※あくまでざっくり言うと）

1	$('セレクタ').children();

指定したセレクタ内の子要素を取得します。※孫要素は取得できません。
$('#example').children('span');
#example内の子要素（span）を取得します。なけれなnoneを返します。

1	$('セレクタ').find();

指定したセレクタ内の条件に一致した全子孫要素を取得する。
$('#example').find('span');
#example内の全子孫要素（span）を取得します。なけれなnoneを返します。

◾︎自分以外の隣を含む（兄弟）要素の取得

1	$('セレクタ').next();

指定したセレクタ（自分以外）の１つ後の兄弟要素を取得します。

1	$('セレクタ').nextAll();

指定したセレクタ（自分以外）の全ての後の兄弟要素を取得します。

1	$('セレクタ').prev();

指定したセレクタ（自分以外）の１つ前の兄弟要素を取得します。

1	$('セレクタ').prevAll();

指定したセレクタ（自分以外）の全ての前の兄弟要素を取得します。

add

            /**
             * <pre>
             * 指定オブジェクトの要素をコピーして、入力値および選択値をクリア後、指定オブジェクトの後ろに追加します。
             * 追加する前に、指定制限件数チェックを行い、エラーの場合は、後続処理を中止します。
             * </pre>
             * @param 追加対象の要素ID(必須)
             * @param 追加対象の制限数(必須)
             * @param 追加対象行の親要素ID(行追加の場合、必須)
             */
            function add(targetId, addLimitCnt, targetRowParentId){
               var addOriElm;
               // 行追加の場合
               if(targetRowParentId){
                 addOriElm = $(event.srcElement).parents('[id=' + targetRowParentId + ']').find('[id=' + targetId + ']');                  
               }
               // 項目X追加の場合
               else{
                 addOriElm = $('[id=' + targetId + ']');
               }            
                // 追加制限チェック
                if(addOriElm) {
                    if(addOriElm.length === addLimitCnt){
                        alert('もうたくさんだよ。これぐらいでいいでしょう？');
                        return;
                    }
                    // 指定オブジェクトの最後要素をコピー
                    var newObj = addOriElm.last().clone();
                 
                    // 値クリア
                    $(newObj).find("input[type='radio']").prop("checked",false);  
                    $(newObj).find("input[type='checkbox']").prop("checked",false);
                    $(newObj).find('input, textarea, select').val('');
                    //$(newObj).find("select > option:selected").prop("selected",false);

                   addOriElm.last().after(newObj);
                    return;
                }
                console.log('存在しないIdです。' + targetId);
            }                      
         
            /**
             * <pre>
             * 指定対象要素を削除する。
             * 削除する前に、指定制限件数チェックを行い、エラーの場合は、後続処理を中止します。
             * </pre>
             * @param 追加対象の要素ID(必須)
             * @param 追加対象行の親要素ID(行追加の場合、必須)
             */        
            function del(targetId, targetRowParentId){
                var targetElm;
                //行削除
                if(targetRowParentId){
                    targetElm = $(event.srcElement).parents('[id =' + targetRowParentId + ']').find('[id =' + targetId + ']');                  
                }
                //項目X削除
                else{
                    targetElm = $('[id =' + targetId + ']');
                }              
                if(targetElm.length === 1){
                    alert('最後は削除できません');
                    //$('[id=' + targetId + ']').first().children().find('[id=' + $(el).attr('id') + ']').prop('disabled',true);                
                    return;
                }              
                $(event.srcElement).parents('[id =' + targetId + ']').each(function(){ $(this).remove();});
            }



//row
<div id="sampleParentRow">

    <div  id='sampleRow'>
        <div>
            <label>item</label>
            <input type='text' >
        </div>                                                          

        <div>
            <button onClick="del('sampleRow', 'sampleParentRow')">del</button>
        </div> 
    </div> 


    <div>
       <button onClick="add('sampleRow', 5, 'sampleParentRow');" >add</button> 
   </div>

</div>




//block
<div id="X">
....中略

<div>
<button onClick="add('X',  3);">add</button>
</div>

<div>
   <button onClick="del('X')" >del</button>
</div> 

....中略


</div>