JQuery3覚書　属性・階層と付き合う

HTMLを初めて触ったのは22とか23の頃で、もう20年以上前の話になってしまった。
そのころはタグは大文字で書くのが普通だった。

いつの間にかIDやNAME、CLASSでスタイルを指定できる世の中になってしまった。
タグは小文字で書くのが当然になった。

そして今、属性を自分で勝手に作ってデータ操作する時代。
jsのライブラリもいっぱい世の中に出回っているが、何をやっているのかわからないやら、余計なことをするわで、結局自分でゴリゴリ作った方がカスタマイズしやすいんではないのか？などと後戻りできない旅路の一歩をを踏み出してしまう。

■ 属性

例えばの以下のようなテーブル構成の場合でいうならば、「data-no」というのが勝手に作った属性。
この属性の設定値を取得する方法をメモする。

<table id="tab1">
    <thead>
        <tr>
            <th data-no='1'>COL1</th>
            <th data-no='2'>COL2</th>
            <th data-no='3'>COL3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-cd="101">DATA1-1</td>
            <td data-cd="102">DATA1-2</td>
            <td data-cd="103">DATA1-3</td>
        </tr>
        <tr>
            <td data-cd="201">DATA2-1</td>
            <td data-cd="202">DATA2-2</td>
            <td data-cd="203">DATA2-3</td>
        </tr>
    </tbody>
</table>

JQueryで、thタグをクリックしたときに、そのdata-noが何かをアラート表示させてみる。

    $(document).on('click', '#tab1>thead>tr>th', function (event) {
        alert($(this).attr('data-no'));
    });

これは、以下のように書いても問題はないのだが、もし当該テーブル、あるいはテーブルの要素が動的であった場合は、CLICKイベントが検知できないので、上記のように書いた方が汎用的のよう。

    $('#tab1>thead>tr>th').on('click', function (event) {
        // （記載略）
    });

対象の指定は下のように省略して書いても、tbodyタグにthがないときは問題ない。

    $('#tab1 th').on('click', function (event) {
        // （記載略）
    });

なお、attrは、attr({要素名})とすると、指定した要素の値があればその設定を返し、ないときはundefindedを返す。
そして、指定した要素に値を設定するときは、 attr({要素名}, {設定値}) とする。

---

■ 階層（親・子）

次に階層（親・子）を考慮しながら値を取る方法をメモしておく。
はじめにイベントの対象要素を「$(‘#tab1>thead>tr>th’)」と、恩着せがましく記述したのだが、これは親子関係をわかりやすくするためでもある。

#tabの子供がthead、その子供はtr、その子供はth

ということで、逆に言うと、thの親はtr、trの親は・・・と、もう書かないけどそんな感じ。

＞ 階層（親）

親は簡単に取れる。なんせ１つだから。

親である(tr)のHTML記述内容をアラート表示させてみる。

    $(document).on('click', '#tab1>thead>tr>th', function (event) {
        alert($(this).parent().html());
    });

簡単。親の親(thead)はparent().parent()。
親の親の親(#tab1)なら、parent().parent().parent()ということに。もはやfor文でも使った方がよさそうだ。

＞ 階層（子）

子の取り方はいろいろ。

試しに#tab1 tbody tr の行をクリックしたら、子要素(td)を順番にとって、コンソールに出力してみる。

    $(document).on('click', '#tab1>tbody>tr', function (event) {
        $(this).children().each(function (event) {    // (a)
            console.log($(this).html());              // (b)
        });
    });

(a)の$(this)は「tr」の要素のこと。
(b)の$(this)は子要素「td」のこと。
これだと、trの子要素はすべて取得できるので、tdとthの両方のタグがある場合は両方とも取得できる。

    $(document).on('click', '#tab1>tbody>tr', function (event) {
        $(this).children('td').each(function (event) {
            console.log($(this).html());
        });
    });

これだと、trの子要素のうちtdタグのみを取得できる。

    $(document).on('click', '#tab1>tbody>tr', function (event) {
        $(this).find('td').each(function (event) {
            console.log($(this).html());
        });
    });

findだと、引数で指定した要素であれば、子要素でも、孫要素でも範囲内すべてから取得可能になる。
サンプルだとテーブルの中にテーブルを入れ子していないので、子要素のみ取得できる。

children()を使うか、find()を使うかは子要素だけなのか、関係なく下の階層すべてに適用するのかで決める。

＞ 階層（子要素のｎ個目）

    $(document).on('click', '#tab1>tbody>tr', function (event) {
        $(this).children('td:nth-child(2)').each(function (event) {
            console.log($(this).html());
        });
    });

childrenで対象を指定するときに「:nth-child({n})」を使うと、n番目の要素だけ取得できる。

今日はここまで。次はソートについてメモせねば。