カテゴリー: jQuery

jQueryで特定クラスをループする方法です。

each()メソッドを使う

eachメソッドを使えば、特定クラスをループすることができます。

$('セレクタ').each(function(index, element){ //ここに処理を記載 });

実際はこんな感じ

<ul>
    <li class="list">１項目</li>
    <li class="list">２項目</li>
    <li class="list">３項目</li>
    <li class="list">４項目</li>
</ul>

$(".list").each(function(i,e){
    if($(e).text === '２項目'){
        // 一致したらクラスを追加する
        $(e).addClass("no2");
        return false;
    }
});

breakはreturn false;で行う

ループを途中で処理を抜けたい場合はreturn false;で終了させます。

continueはreturn true;(false以外)で行う

ループで特定条件以外のものは、次の配列に進みたいcontinueをしたい場合、return;で行います。
returnは[false]以外なら何でも良いです。

ハマったこと

eachメソッドの中で、特定処理を行う実装をしたら、ループが止まらなかった。

functionで別処理を呼び出しているので、特定条件を判別するよう、フラグ管理にして解決した。

var locationFg = false;

$(".list").each(function(i,e){
    if($(e).text === '２項目'){
        // 一致したらクラスを追加する
        locationFg = true;
        return false;
    }
});
var locationStr = "./hoge.html"

if(locationFg){
    locationStr = "./fuga.html"
}
// ページ移動
location.href = locationStr;

jqueryのdatatablesを利用した際、ScrollYを指定するとヘッダがずれることがあります。

解決策

[columns.adjust()]を使う

datatableには、再度列の調整をしてくれる関数が提供されています。

var table = $('#datatable1').DataTable({
    scrollY: 360,
    ...
});

table.columns.adjust();

注意点

$(‘#datatable1’).datatable({});でも表はできますがcolumns.adjust()関数は動きません。
$(‘#datatable1’).Datatable({});なら動きます。

×：datatable
〇：Datatable

これに結構な時間ハマった。

タブなどの[display:none;]は切り替えで再度[columns.adjust()]を実施する

TableをCSS上で表示切替する場合は、CSSのdisplay: none;を切り替えることも多いと思います。
切り替え処理時に、columns.adjust()処理を追加することで、ずれなく表示できます。

レスポンシブなら[$(window).on(‘resize’…]で制御する

レスポンシブに設定するなら、Windowサイズを変更したときに発火させると良いです。

スマホの縦表示、横表示や
PCブラウザの起動時と、最大化時などに使えます。

var table = $('#datatable1').DataTable({
    scrollY: 360,
    ...
});

$(window).on('resize', function(){
    table.columns.adjust();
});