タグ別アーカイブ: children

セレクトボックスの表示内容

今回も備忘録的な内容です。
よくある処理ではありますが、select の操作した処理を取得する処理です。

普通の場合には「$(‘#main_selectoption:selected’)」と云う形で処理を
とるのですが、今回は他との兼ね合いによって $(this) を基本として
処理をありました、いつも通りの作業を使用としましたが・・・

・・・あれ、「$(this)」で括っているためその続きが書けません。
そのため、いつもの方法意外で対応する必要があるのかと思います。
今回はのための方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#main_select').click( function() {

                    $objO = $('#main_select option:selected');
                    $('#o_txt').html( $objO.html() );
                    $('#o_val').html( $objO.val() );

                    $objC = $(this).children(':selected');
                    $('#c_txt').html( $objC.html() );
                    $('#c_val').html( $objC.val() );

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }
            th, td {
                min-width        : 100px;
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <select id="main_select">
                <option value="1">TextA</option>
                <option value="2">TextB</option>
                <option value="3">TextC</option>
                <option value="4">TextD</option>
                <option value="5">TextE</option>
            </select>
        </div>

        <div id="main_area">
            <table id="disp_text">
                <tr>
                    <th rowspan="2">$('#main_select option:selected')</th>
                    <th>text</th><td id="o_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="o_val"></td>
                </tr>
                <tr>
                    <th rowspan="2">$('this').children(':selected')</th>
                    <th>text</th><td id="c_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="c_val"></td>
                </tr>
            </table>
        </div>

    </body>
</html>

sample

sample で Select を変すると選択した内容の Text と Value が表示されます。
今回は、取得の方法が異なるため2種類の Text と Value を表示しています。

この方法で今回は無事に値が取れましたが忘れるといけないので記録しておきます。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

配列から特定の情報を表示する

今回は特定の配列から対象のみの情報を取り出す方法です。
配列の内から特定の情報をだけを絞り込みたい事は良くあります。
今回は情報の絞り込みが出来れば良いなと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            // Data Set
            var datMember = [
                {
                    name : 'A',
                    sex  : 'male',
                    age  : 18
                },
                {
                    name : 'B',
                    sex  : 'female',
                    age  : 20},
                {
                    name : 'C',
                    sex  : 'male',
                    age  : 22},
                {
                    name : 'D',
                    sex  : 'female',
                    age  : 25
                },
                {
                    name : 'E',
                    sex  : 'male',
                    age  : 30
                }
            ];


            var target;
            $(function(){

                // Glep Data Age
                var arrAge;
                $('#judgment_age').click( function(){

                    target = $('#select_age').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });


                // Glep Data Sex
                var arrSex;
                $('#judgment_sex').click( function(){

                    target = $('#select_sex').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });

                // Daat Set
                function setDispData(setObj, setData) {
                    $('#' + setObj).empty();
                    $.each(setData, function(index) {
                        $('#' + setObj)
                            .append('<div id="name_' + setData[index]['name'] + '"></div>')
                            .children('#name_' + setData[index]['name'])
                            .append('<h2>' + setData[index]['name'] + '</h2>')
                            .append('<dl></dl>')
                            .children('dl')
                            .append('<dt>name</dt><dd>' + setData[index]['name'] + '</dd>')
                            .append('<dt>Age</dt><dd>'  + setData[index]['age']  + '</dd>')
                            .append('<dt>Sex</dt><dd>'  + setData[index]['sex']  + '</dd>');
                    });
                }
                // init Data
                setDispData('all_data', datMember);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

            div.target_div {
                width        : 25px;
                height       : 25px;
                line-height  : 25px;
                text-align   : center;
                border       : solid 1px #000000;
                float        : left;
            }

            dl {
                width        : 300px;
            }
            dt {
                float        : left;
            }
            dd {
                margin-left  : 80px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="select_area">

                <select id="select_age">
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                    <option value="35">35</option>
                </select>
                <button id="judgment_age">Age Judgment</button>

                <select id="select_sex">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>
                <button id="judgment_sex">Sex Judgment</button>

            </div>

            <div id="disp_area">

                <h1>Grep True</h1>
                <div id="grep_true"></div>

                <h1>Grep False</h1>
                <div id="grep_false"></div>

                <h1>All Data</h1>
                <div id="all_data"></div>

            </div>

        </div>
    </body>
</html>

sample

sample には二組の select と button が設置してあります。
age を選択して button を押すと指定した年齢以上の情報を絞り込みます。
sex を選択して button を押すと指定した性別の情報を絞り込みます。

実際に絞り込みが出来ることが出来ました。
ちょっと意外だったことは grep の第3引数です。
true を指定することで絞り込みを行った結果、対象外となった情報のみ
対象に出来るということです。
「その他」だけを表示したいことは多々ありますが中々便利ですよねぇ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ページの無限ループ (2)

前回はページの無限ループを行いました。
今回は同じような内容に挑戦してみようかと思います。
内容は横の自動無限ループです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var loopWidth = $('#main_area').children('span').width();
                    $('#main_area span').clone().appendTo('#main_area');

                function execSideLoop() {
                    $('#main_area').css({left:'0'});
                    $('#main_area').stop().animate({left:'-' + loopWidth + 'px'}, 25000, 'linear', execSideLoop);
                };

                execSideLoop();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #main_area {
                white-space : nowrap;
                position : absolute;
                top : 0px;
            }

            #main_area span {
                float : float;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <span>
                    text00 text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12 text13 text14 text15 text16 text17 text18 text19 text20 text21 text22 text23 text24 text25 text26 text27 text28 text29 text30 text31 text32 text33 text34 text35 text36 text37 text38 text39 text40 text41 text42 text43 text44 text45 text46 text47 text48 text49 text50
                </span>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを左に自動スクロールをしています。

この機能自体は優秀な plugin が多くありますので、実際の Webサイトを作成することは無いと思います。
まあ、そんな実際には作成することのない機能について、どうやれば再現できるかの勉強ですね。
実際に触ってみると色々と勉強になるものですね。

出来た内容は往年の MARQUEE ですね(笑)
実際には文字だけでは使い道は無いですが、画像などを使用しないと華がないなぁ。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

Value を jQuery で変更した際の Change イベント

今回は jQuery で Value 値を変更したときにイベントを発生する方法の調査です。
まぁ、前回「プロパティに関する attr → prop 変更について」の反省を兼ねた内容です。

前回の内容はこんな流れでした。
 1.親となる checkbox のチェック状態を変更する。
 2.子となる checkbox のチェック状態を親と同じ状態に切り替える。
 3.孫となる checkbox のチェック状態を子と同じ状態に切り替える。

ですが、できませんでした。
「親」から「子」の工程は問題なく動作するんですが、「子」から「孫」の工程が動作しません。

前回は特に重要視しなくて、別途「孫」の checkbox を変更する function を実行したんですが・・・
考えれば考えるほど「無駄な処理だなぁ」との考えに至ったため「リベンジ」を行います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkAll = false;
                var objArea;

                // All Change Check
                $('#check0').click(function(){
                    checkAll = $(this).prop('checked');
                    $('#check1').prop('checked', checkAll).change();
                    $('#check2').prop('checked', checkAll).change();
                    $('#check3').prop('checked', checkAll).change();
                });

                // Area 1 Change Check
                $('#check1').change(function(){
                    checkBoxChenge(1, $(this).prop('checked'));
                });

                // Area 2 Change Check
                $('#check2').change(function(){
                    checkBoxChenge(2, $(this).prop('checked'));
                });

                // Area 3 Change Check
                $('#check3').change(function(){
                    checkBoxChenge(3, $(this).prop('checked'));
                });

                // Change Data Set
                function checkBoxChenge(areaNo, setFlg){
                    objArea = $('#dispCheck' + areaNo);
                    if (setFlg == true) {
                        objArea.children('input').prop('checked', true);
                    } else {
                        objArea.children('input').prop('checked', false);
                    }
                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #dispArea div {
                margin  : 30px;
                padding : 10px;
                border  : solid 1px #000000;
            }
        --></style>
        
    </head>
    <body>

        <div id="selectArea">
            <input type="checkbox" id="check0" /> Parent Check Cange<br />
        </div>

        <div id="dispArea">

            <div id="dispCheck0">
                <p>Child Area</p>
                <input type="checkbox" id="check1" /> Grandchild Area 1<br />
                <input type="checkbox" id="check2" /> Grandchild Area 2<br />
                <input type="checkbox" id="check3" /> Grandchild Area 3<br />
            </div>

            <div id="dispCheck1">
                <p>Grandchild Area 1</p>
                <input type="checkbox" value="1_1" /> 1<br />
                <input type="checkbox" value="1_2" /> 2<br />
                <input type="checkbox" value="1_3" /> 3<br />
            </div>

            <div id="dispCheck2">
                <p>Grandchild Area 2</p>
                <input type="checkbox" value="2_1" /> 1<br />
                <input type="checkbox" value="2_2" /> 2<br />
                <input type="checkbox" value="2_3" /> 3<br />
            </div>

            <div id="dispCheck3">
                <p>Grandchild Area 3</p>
                <input type="checkbox" value="3_1" /> 1<br />
                <input type="checkbox" value="3_2" /> 2<br />
                <input type="checkbox" value="3_3" /> 3<br />
            </div>

        </div>

    </body>
</html>

sample

如何でしょう。 子の checkbox の変更が、そのまま孫の checkbox に影響しました。

原因は jQuery で 子の checkbox を変更したことでした。
どうも、jQuery で Value 値を変更しても Change イベントは実行されないようです。

対策として、処理の最後に「.change()」をつけることで解決します。
意味としては「対象に対して Change イベントを実行させる」ということですね。
もちろん、Change 以外にも Click など、同様の方法で実行させることができました。

まぁ、これも今までに何度か書いた「個人的にもっと早く知っておきたかった」内容ですね。
自己満足とは言え、心の中のモヤモヤが晴れてスッキリしました。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

プロパティに関する attr → prop 変更について

今回は checkbox のチェック状態を一括で On / Off 変更する方法です。
まぁ、「アンケートなどを使用する際にリセットする場合などに必要かな・・・」と気軽に開始してみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkAll = false;
                var objArea;

                // All Change Check
                $('#check0').click(function(){
                    checkAll = $(this).prop('checked');
                    $('#check1').prop('checked', checkAll);
                    checkBoxChenge(1, checkAll);
                    $('#check2').prop('checked', checkAll);
                    checkBoxChenge(2, checkAll);
                    $('#check3').prop('checked', checkAll);
                    checkBoxChenge(3, checkAll);
                });

                // Area 1 Change Check
                $('#check1').change(function(){
                    checkBoxChenge(1, $(this).prop('checked'));
                });

                // Area 2 Change Check
                $('#check2').change(function(){
                    checkBoxChenge(2, $(this).prop('checked'));
                });

                // Area 3 Change Check
                $('#check3').change(function(){
                    checkBoxChenge(3, $(this).prop('checked'));
                });

                // Change Data Set
                function checkBoxChenge(areaNo, setFlg){
                    objArea = $('#dispCheck' + areaNo);
                    if (setFlg == true) {
                        objArea.children('input').prop('checked', true);
                    } else {
                        objArea.children('input').prop('checked', false);
                    }
                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #dispArea div {
                margin  : 30px;
                padding : 10px;
                border  : solid 1px #000000;
            }
        --></style>
        
    </head>
    <body>

        <div id="selectArea">
            <input type="checkbox" id="check0" /> All Check Cange<br />
            <input type="checkbox" id="check1" /> Area 1 Check Cange<br />
            <input type="checkbox" id="check2" /> Area 2 Check Cange<br />
            <input type="checkbox" id="check3" /> Area 3 Check Cange<br />
        </div>

        <div id="dispArea">

            <div id="dispCheck1">
                <p>Disp Area 1</p>
                <input type="checkbox" value="1_1" /> 1<br />
                <input type="checkbox" value="1_2" /> 2<br />
                <input type="checkbox" value="1_3" /> 3<br />
                <input type="checkbox" value="1_4" /> 4<br />
                <input type="checkbox" value="1_5" /> 5<br />
            </div>

            <div id="dispCheck2">
                <p>Disp Area 2</p>
                <input type="checkbox" value="2_1" /> 1<br />
                <input type="checkbox" value="2_2" /> 2<br />
                <input type="checkbox" value="2_3" /> 3<br />
                <input type="checkbox" value="2_4" /> 4<br />
                <input type="checkbox" value="2_5" /> 5<br />
            </div>

            <div id="dispCheck3">
                <p>Disp Area 3</p>
                <input type="checkbox" value="3_1" /> 1<br />
                <input type="checkbox" value="3_2" /> 2<br />
                <input type="checkbox" value="3_3" /> 3<br />
                <input type="checkbox" value="3_4" /> 4<br />
                <input type="checkbox" value="3_5" /> 5<br />
            </div>

        </div>

    </body>
</html>

sample

これで 上部のチェックボックスに伴って、下部の枠内のチェックボックスが一気に変更されます。

実は、今回は予想以上に時間がかかりました。
難航した原因は “checked” つまりチェック状態の取得です。

これ検索すると結構、下記の方法が検索結果に上がってきます。(2013/09/21 時点)
 checkFlg = $(object).attr(‘checked’);
 ※もちろん他の方法もありますが、検索結果の頻度が一番高いんじゃないかと思います。

でもこれ、間違ってます。
正確には間違っていなかったんですが、あえて間違っていると断言します。

jQuery が v1.9.1 以降の場合の正解は以下の通りです。
 checkFlg = $(object).prop(‘checked’);
 ※変更点は簡単です。attr → prop に変更してください。

どうも jQuery が v1.6 の時に プロパティを取得・設定するには prop を使用すると決めていたみたいですね・・・
ただ、いきなり? attr が使用できなくなるのは問題ということで、v1.6.1 の時に後方互換性が追加されました。
そして、v1.9.1 にて改めてプロパティの取得・設定に attr が使用できなくなったという経緯の様です。

どうせ止めるなら、v1.6 でキッパリ止めといてよ・・・
私が苦労しただけで、他の人には当然の事だったのかなぁ・・・

影響力のない当ブログですが、同じ個所で困った方の手助けになれば幸いです。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。