タグ別アーカイブ: each

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

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

<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 人がこの 投稿 は役に立ったと言っています。

多次元配列のデータ作成

今回は他次元配列のデータ作成に関する覚書です。
いつも他次元配列を使用するときには Key の値を ID などにします。
ただ今回はある都合で連番にする必要がありました。
ではやってみます。

<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 arrCategory = new Array('category_1', 'category_2', 'category_3', 'category_4');
                var arrWorker = new Array();
                    arrWorker['category_1'] = new Array();
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_1';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_2';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_3';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_4';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_5';
                    arrWorker['category_2'] = new Array();
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_1';
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_2';
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_3';
                    arrWorker['category_3'] = new Array();
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_1';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_2';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_3';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_4';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_5';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_6';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_7';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_8';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_9';
                    arrWorker['category_4'] = new Array();
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_1';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_2';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_3';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_4';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_5';

                $.each(arrCategory, function(){
                    $('#disp_data').append('<h1>' + this + '</h1>\n')
                    $.each(arrWorker[this], function(index) {
                        $('#disp_data').append('<p>' + index + ' : ' + this + '</p>\n')
                    });
                });

            });

        --></script>

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

            div {
                margin       : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="disp_data"></div>
        </div>

    </body>
</html>

sample

sample では2次元配列の内容を表示しています。
本来は php でデータ構築するんですが当ブログでは配列の内容は固定値です。
表示用の sample には良くないな~、とは思います。
まぁ、あくまで覚書なので良いでしょう。

本来は push で行けると思うんですが、連想配列は無理なんでしょうか。
とりあえず今回の方法「変数名[‘親配列’].length」に落ち着きました。
それぞれの親配列毎に変数を持たせるのも無駄なのでこんな形にして見ました。
普段は問題がないのですが、今後使わないとも限らないので記載しておきます。

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

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

情報のユニーク化

今回は情報のユニーク化です。
お仕事案件にて blog に書き込みをした日付のみ日付を表示したいとのことです。
但し、blog は 1日に1件も書かないこともあるし、3件以上とのことです。
その中から、重複しないで出力して欲しいとのことです。
ではやってみます。

<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 arrBase = ['2015/03/27', '2015/03/28', '2015/03/29', '2015/03/28', '2015/03/29','2015/03/28', '2015/03/31', '2015/03/30', '2015/03/31'];
                var arrTemp;

                $('#btn_normal').click(function() {
                    dispArr('normal');
                })
                $('#btn_unique').click(function() {
                    dispArr('unique');
                })

                function dispArr(type) {

                    $('#disp_data').empty();

                    tempData = $.extend(true, [], arrBase);;
                    if (type == 'unique') {
                        tempData = $.unique(tempData);
                    }

                    tempData.sort();
                    $.each(tempData, function(val) {
                        $('#disp_data').append(tempData[val] + '<br />');
                    });

                }

            });

        --></script>

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

            div {
                margin       : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="disp_button">
                <button id="btn_normal">normal</button>
                <button id="btn_unique">unique</button>
            </div>
            <div id="disp_data"></div>
        </div>

    </body>
</html>

sample

sample には buttom が 2つあります。
「normal」を押すと日付をソートして表示します。
「unique」を押すと日付をソートして、かつ、重複した内容を省いて表示します。

今回の案件が WordPress の場合、すでに月別アーカイブなどは存在しています。
 #それに基本は PHP でやりますよね・・・

ですが jQuery にて絞り込みを行うことも、まだまだ考えられます。
そんな時には今回の unique 関数が役に立つかと思います。
他にも使い方は結構ありそうです。
ちょっとわくわくしますね。

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 menuMargin = 100;
                var classCnt   = 0;
                $(window).scroll(function () {
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            if (classCnt != (cnt + 1)) {
                                $('div.menu_point').removeClass('active').stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                                classCnt = cnt + 1;
                                $('#menu_' + classCnt).addClass('active').stop().animate({'margin-left':'0'}, 'slow', 'swing').css({'background-color':'#ff9999'});
                            }
                            return false;
                        }
                    });
                });

                $('div#menu_area .menu_point').hover(
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'0'}, 'fast', 'swing').css({'background-color':'#99ffff'});
                        }
                    },
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                        }
                    }
                );

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : -70px;
                z-index          : 9999;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area div.active {
                background-color : red;
                margin-left      : 0;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample の内容も基本的には前回と変わりません。
違いとして該当の menu 部分に来たときにちょっとした動きをつけてみました。

今回の様に多少でも動きをつける方がやはり見映えは良いですね。
色々な動きの発想が出来るといいんですが難しいですね。

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

この投稿は役に立ちましたか? 役に立った 役に立たなかった 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"><!--

            $(function(){

                var menuMargin = 100;
                $(window).scroll(function () {
                    var classCnt = 0;
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            $('div.menu_point').removeClass('active');
                            classCnt = cnt + 1;
                            $('#menu_' + classCnt).addClass('active');
                            return false;
                        }
                    });
                });

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : 0;
                z-index          : 9999;
                background-color : #ffffff;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area .active {
                color            : #ffffff;
                background-color : #00ff00;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample を下に scroll していくと表示内容によって menu 部分の色が変わります。
もちろん menu ですので click すれば対象の部分を表示できます。

現在表示中のページ位置を表示できます。
menu 用の div に対して class を設定しているだけですので色を変えるだけではなく
文字の表示内容を変えたりも出来ます。

今後はパララックス効果などの多様がありますので、使用する機会が無いかもしれません。
それでも使い方さえ間違えなければ役に立つ機能だと思います。
ぜひお試しください。

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

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