LoginSignup
4
3

More than 5 years have passed since last update.

jQuery にも Ruby の Object#tap のようなメソッドがほしい

Last updated at Posted at 2015-06-19

例えば、以下のような jQuery のコードがあったとします。

var $niko = $('div.checkbox.niko'),
    $maki = $('div.checkbox.maki');

$niko
    .find('input[type=checkbox]')
    .prop('checked', true);

$niko
    .append($('<div>', { text: 'にっこにっこにー' }));

$maki
    .find('input[type=checkbox]')
    .prop('checked', true);

$maki
    .find('label')
    .css({
        color: 'white',
        'background-color': 'rgb(239, 69, 74)',
        padding: '4px'
    });

このコードを見て、私は次のことを考えました。

  1. .find().prop() の処理を共通化できないだろうか。
  2. .find().prop() の処理の返り値を $('input') ではなく $('div.checkbox') のままにできないだろう。そしたらメソッドチェーンを繋げられるのに。

そこで何か方法はないか思案していたところ、Ruby の Object#tap を思い出しました。

self を引数としてブロックを評価し、self を返します。

(ちなみに Ruby における self は JavaScript における this です。)

こんなメソッドが jQuery にもないかな? と思い探してみましたが見つかりませんでした。
しかし Google 検索してみると 「jQueryでtapを定義してみた」 というまさに僕と同じことを考えていた方がいらっしゃったので、この知恵を拝借しました。

// jQuery に .tap() 関数を追加する。
$.fn.tap = function (fn) {
  if ($.isFunction(fn)) { fn.call(this); }

  return this;
};

var $niko = $('div.checkbox.niko'),
    $maki = $('div.checkbox.maki'),
    check;

// input 要素をチェックする処理を関数として共通化する。
check = function () {
    this.find('input[type=checkbox]')
        .prop('checked', true);
};

$niko
    .tap(check)
    .append($('<div>', { text: 'にっこにっこにー' }));

$maki
    .tap(check)
    .find('label')
    .css({
        color: 'white',
        'background-color': 'rgb(239, 69, 74)',
        padding: '4px'
    });

これでなかなかスッキリしたと思います :sparkles:

4
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3