jquery divレベルセレクタ

11159 ワード

div id="modelName" class="modelName">

            <!--       -->

            <div name="CX">

                    ------     :<input name="txtcx" type="text" />

                     <a href="#" name="addCX">    </a>  

                    

                    <div class="modelPL" id="modelPL">

                        <!--      -->

                        <div name="PL">

                                    --------   :<input name="txtpl" type="text" />

                                    <a href="#" name="addPL">    </a>

                                

                                    <div id="modelDate" class="modelDate">

                                        <!--          -->

                                                <div name="SCNF">

                                                ------     :<input name="txtscnf" type="text" />

                                                 <a href="#" name="addNF">      </a><br/><br/>

                                                </div>



                                  </div>

                      </div>

                      <br /><br />

         

                    </div>

                </div>

                 <br /><br />

     

</div>

値の取り方
//      

    $("#submit").click(function() {

        var CX = $("div[name=CX]");

        //alert("  :"+CX.size());

        var str = "";

        var s1 = "";

        var s2 = "";

        var s3 = ""

        

        CX.each(function(){

            /**   */

            var T1 = $(this).find("input[name=txtcx]");

            T1.each(function(){

                alert("  : " + $(this).val());

                //str += $(this).val() + "@";

                s1 += $(this).val() + "@";

            });

            

            

            //          DIV 

            var PL = $(this).find("#modelPL div[name=PL]");

            //alert("  :" + PL.size());

            //alert("html:" + PL.html());

            PL.each(function(){

                /**   */

                var T2 = $(this).find("input[name=txtpl]");

                T2.each(function(){

                    //alert("!!  : " + $(this).val());

                    //str += $(this).val() + "#";

                    s2 += $(this).val() + "#";

                });



                //         DIV

                var NF = $(this).find("#modelDate div[name=SCNF] input[name=txtscnf]");

                //alert("  :" + NF.size());

                //alert("html33:" + $(this).find("#modelDate div[name=SCNF]").html());

                NF.each(function(){

                    alert("$$    : " + $(this).val());

                    s3 += $(this).val() + "$";

                });

                s2 += s3 + "#";

                s3 = "";



            });

            s1 += s2 + "@";

            s2 = "";

    

        });

        

        alert("str:" + s1);

        

    });

     

});

重要な思想:階層はdivを遍歴して、divを位置決めしながら、input値を取って、2歩に分けて歩いて、肝心なのはセレクタの応用です.現在の遍歴オブジェクトthisでは、セレクタを再運用することが肝心である.find()メソッド