<ul id="List">
	<li>1</li>
	<li class="red">2</li>
	<li>3</li>
	<li><span class="red">4</span></li>
	<li class="red">5</li>
	<li>6</li>
</ul>
<!-- /#List -->

$(function() {
  var $list  = $('#List');
  var $items = $list.find('li');
});

このように、「$items」にul#List内のli要素が入っているような状況で、「redクラスがついている要素だけ取り出したい」「〜番目の要素を取り出したい」といったような、「もっと要素を条件によって絞り込みたい」って時が結構あります。

今回はそういう場合に使える関数をご紹介したいと思います。

順番による絞込

first/last

最初、又は最後の要素を取り出したい場合に使う関数です。

// 最初の要素を取り出す
var $first_item = $items.first();

// 最後の要素を取り出す。
var $last_item = $items.last();

eq(n)

n番目の要素を取り出したい場合に使う関数です。

// 3番目の要素を取り出す
var $third_item = $items.eq(2);

3番目なのに2を指定しているのは間違いではありません。eqの引数は0オリジン（0が最初の要素と対応）なので3番目の要素を取り出したい場合は2を指定する必要があります。

slice(start, end)

start番目からend番目までの要素を取り出す場合に使う関数です。

// 3~5番目の要素を取り出す
var $new_items = $items.slice(2, 4);

sliceもeqと同様0オリジンなので注意しましょう。

CSSセレクタによる絞込

filter(selector)/not(selector)

「〜のクラスを持っている（持っていない）要素を取り出す」といったCSSセレクタによる絞込をしたい場合はfilter/not関数を使います。

var $red_items = $items.filter('.red');

var $notred_items = $items.not('.red');

この関数に関して注意しておきたいのが、「その要素自身がセレクタで指定した条件に適合するかどうか」で抽出されるかどうか判断される点です。（子孫要素が条件を満たそうが関係ないということです）

今回の例で言うと、liタグ自身が「.red」クラスを持っているかどうかで判断されます。なので、4番目のliタグは子要素にspan.redを持っていますが、liタグ自身にはredクラスが付いていないのでfilterではなく、notでの抽出対象となります。

子孫要素の有無による絞込

has(selector)

filter/notのパターンとは逆に、「子孫要素がセレクタに適合するかどうか」で抽出の判断がされるパターンです。

var $hasred_items = $items.has('.red');

filter/notの時とは異なり、liタグがredクラスを持っていようが関係なく、子孫要素がredクラスを持っているかどうかで判断されますので4番目のspan.redを子要素として持っているliタグのみが抽出対象となります。

以上

「更にこの条件で絞り込みたい」という状況が忘れた頃にやってきて、その度に調べ直すことがよくあるので今回まとめなおしてみました。

以上、たにっぱでした〜

タイトルは基本的に必須にしたい場合がほとんどだと思いますので、今回はタイトルの入力の有無をチェックする方法をご紹介したいと思います。

流れ

• タイトルの入力チェックをするためのJSファイルの作成
• 作成したJSファイルを、functions.phpを弄って読み込ませる

JSファイルの作成

;(function($){
  var $submitBtn = $('#publish');
  var $titleForm = $('#title');

  $submitBtn.on('click', function(){
    var title = $titleForm.val();

    if (title.length <= 0) {
      alert('タイトルを設定してください。');

      return false;
    }
  });
})(jQuery);

JSの処理は非常に単純です。

更新ボタンクリック時にタイトルの入力チェックをして、未入力ならアラートを出してキャンセルしています。

functions.phpを弄って読み込ませる

function set_admin_script() {
  print('<script type="text/javascript" src="'.get_template_directory_uri().'/common/js/admin.js"></script>');
}
add_action('admin_footer', 'set_admin_script');

「admin_footer」フックを利用することで、管理画面のフッターに任意のコードを出力することが出来ます。

今回は、先ほど作成したJSファイルを読み込ませるようscriptタグを出力させています。

以上

WordPressは管理画面側のカスタマイズが複雑なことが多く、中々上手くいかないこともありますが管理画面が使いにくいとWordPressを導入する意味がなくなってしまいますので頑張って調整しましょう。

以上、たにっぱでした〜

今回はそんなミスを見つけやすくするために、ブックマークレットを使用してチェックの補助ツールを簡単に作成する方法をご紹介したいと思います。

ブックマークレット

ブラウザはブックマークやURLバーから任意のjavascriptを実行することが出来ます。この時に実行するプログラムのことを「ブックマークレット」と言います。

簡単な例

URLバーに

javascript:alert('ブックマークレットのテスト');

と入れてEnterしてみて下さい。アラートが表示されたかと思います。

これが簡単なブックマークレットの例です。

ブックマークレットは

javascript:(実行したいjavascriptコード)

の形式でURLバー、もしくはブックマークから実行することが出来ます。

aタグの反応範囲を視覚的に表示

それでは、ブックマークレットを利用して冒頭に挙げた「aタグの反応範囲が小さすぎる」というミスを防ぐために、aタグの大きさを視覚的に表示してくれるブックマークレットを作ってみましょう。

javascriptソースは非常に簡単で、以下のとおりです。

(function(){
  $('a').css('outline', '1px solid red');
})();

aタグにoutlineを設定することでaタグの範囲を視覚的に表示させてしまいます。borderと違ってoutlineはレイアウトに影響を与えないので、今回のようなデバッグ目的に最適です。

ブックマークレットは「javascript:」を先頭に付けるだけなので以下の様になります。

javascript:(function(){
  $('a').css('outline', '1px solid red');
})();

これをURLバーに貼り付けてEnterしてみてください。aタグの要素が赤く囲まれるはずです。（GoogleChrome/Macだとペーストする際に「javascript:」の記述が消えてしまったので、その場合は直接入力してください。）

サイトがjQueryを読み込んでいない場合

先ほどのソースコードはjQueryを使用しているため、このままだとjQueryを読み込んでいないサイトでは動作しません。

そのため、jQueryを読み込むコードを追加しましょう。ソースコードは以下のとおりです。

(function(){
  function main() {
    $('a').css('outline', '1px solid red');
  }
  if (typeof jQuery === 'undefined') {
    var scrTmp = document.createElement('script');
    scrTmp.type = 'text/javascript';
    scrTmp.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
    document.body.appendChild(scrTmp);
    scrTmp.onload = main;
  } else {
    main();
  }
})();

関数mainに実際に実行したい処理を記述し、jQueryがサイトに読み込まれていない場合は、jQueryを読み込んでから実行するようになっています。

このようにしておけばjQueryを読み込んでいないサイトでも使える汎用性の高いブックマークレットが作成できます。

以上

今回はaタグの視覚的な表示のみを例として挙げましたが、発想次第で色々なチェックが可能です。

例えば、

• モバイルサイトなのに奇数サイズの画像を使用していないか
• imgタグのwidth/heightの指定が本来の画像サイズと異なっていないか
  また、モバイルサイトの場合本来の画像サイズの半分のサイズの指定となっているか
• 1クリックでW3Cのチェックをする
  （この場合はサーバーサイドのプログラムも少し必要かと思います）

などが挙げられます。

チェック漏れは永遠の課題ではあるのですが、人間の注意力には限界があるので出来る限りツールやシステムに頼って、注意しなくてもミスが見つかるようにしたいですね。

以上、たにっぱでした〜

ちょうどこの前そんな状況に遭遇したので、今回はこの問題の解決法に関して原因とともにご紹介したいと思います。

問題のあるパターン

「カーソルを乗せると開き、カーソルを外すと閉じるナビ」なんてものを作ろうとした場合、最初に思いつくのは以下のようなコードかと思います。

ソースコード

$(function() {
  var $subNav = $('.subNav');
  $('.hoverNav').hover(
    function(){
      $subNav.slideDown();
    },
    function(){
      $subNav.slideUp();
    }
  );
});

<div class="hoverNav">
  <p class="mainNav">ホバーで開閉</p>
  <ul class="subNav">
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
  </ul>
</div>

実例

次が上記ソースコードの実例なのですが、「ホバーで開閉」ボタンにカーソルを連続で乗せたり外したりしてみて下さい。

すると、カーソルを止めてもしばらく動き続けるかと思います。

原因

この問題ですが、jQueryは既にアニメーションを実行している時に追加でアニメーションを実行する命令が来た場合、後から来たアニメーションを貯めておいて、今実行しているアニメーションが終わってから実行するという動作をする点が原因となっています。

今回の場合、ボックスを往復する度にアニメーションの実行命令が貯まり、マウスを止めた後も貯まったアニメーションを消化するためにナビが開いたり閉じたりし続けていた、っていう状態ですね。

解決法

以下のようにソースコードを変更すれば解決します。

ソースコード

$(function() {
  var $subNav = $('.subNav');
  $('.hoverNav').hover(
    function(){
      // stop関数を追加
      $subNav.stop().slideDown();
    },
    function(){
      // stop関数を追加
      $subNav.stop().slideUp();
    }
  );
});

実例

解説

slideDown/slideUp関数の直前にstop関数を追加しただけです。

stop関数は現在実行しているアニメーションを停止させる関数なのですが、これを実行してからslideDown/slideUpなどのアニメーション関数を呼び出すと、現在実行しているアニメーションを破棄して、新しく呼ばれたアニメーションを即実行します。

以上

jQueryアニメーションのこの特徴と解決法は、知っておかないとかなり使い勝手の悪いUIが出来上がってしまうことが多々あるので覚えておきましょう！（自戒）

以上、たにっぱでした〜

ただ、まだiOS7使用者が無視できない割合で居ることから、案件の対応OSにiOS7が入ることも多く、iOS7以下でスクロールイベントを取得したいという状況も結構発生するかと思います。

そこで、今回はiscroll-probe.jsを使用して、スクロールイベントを擬似的に取得する方法をご紹介したいと思います。

iScroll5ライブラリの取得

iScroll 5, smooth scrolling for the web

上の公式サイトの「DOWNLOAD」リンクからライブラリ一式をダウンロードしてください。

中に多くのファイルが入っていますが、今回使用するのは「build」ディレクトリ内の「iscroll-probe.js」のみですので、「iscroll-probe.js」を適宜好きな場所へ配置してください。

ライブラリの読み込み

headタグ内で、iscroll-probe.jsを読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./common/js/lib/iscroll-probe.js"></script>

今回は一部jQueryを使用するためjQueryも読み込んでいます。使用しない場合は読み込む必要はありません。

HTML

iscrollでは、コンテンツ全体を２つのラッパーで囲む必要があります。

今回は以下の様な構造にします。

<body onload="loaded()">
  <div id="WholeWrapper">
    <div id="WholeInner">
      <!-- コンテンツを記述 -->
    </div>
  </div>
</body>

idやクラスには特に規定は無いので自由に付けて大丈夫です。

bodyタグに記述しているonloadコールバック関数に関しては後述します。

CSS

一番外側のラッパーに対しては下記のようなスタイルを当てる必要があります。

#WholeWrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

javascript

<script>
  var myScroll;
  function updatePosition () {
    $(window).trigger('iscroll', {x: this.x, y: this.y});
  }

  // onloadイベント発生時にこの関数を呼び出す
  function loaded () {
    myScroll = new IScroll('#WholeWrapper', {
      deceleration: 0.004, // スクロール時の慣性の強さ
      probeType: 3,
      mouseWheel: true
    });

    myScroll.on('scroll', updatePosition);
    myScroll.on('scrollEnd', updatePosition);
  }

  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  $(function(){
    $(window).on('iscroll', function(e, pos){
      console.log(pos); // スクロール中にもスクロール位置が取得可能
    });
  });
</script>

IScroll初期化時に指定している「deceleration」は慣性の強さで、この値が大きいほどスクロールがすぐ停止するようになります。初期値は「0.0006」なのですが、この値だとiOS Safariの慣性と比較して慣性が異常に強く、スクロールしすぎてしまうので適宜値を調整しましょう。

スクロール系関数

iScrollには様々な関数が用意されているのですが、その中でも一番使用頻度が多いと思われるスクロール系関数を紹介したいと思います。

scrollTo(x, y, time, easing)

(x, y)地点へtimeミリ秒かけてスクロールします。

myScroll.scrollTo(0, -1000, 500, IScroll.utils.ease.elastic);

easingはスクロールの際の加減速の仕方のバリエーションで、quadratic,circular,back,bounce,elasticの5パターン存在しています。

scrollToElement(el, time, offsetX, offsetY, easing)

要素elまでtimeミリ秒かけてスクロールします。その際、止まる位置はoffsetの指定によってずらすことが可能です。easingはscrollToと同じです。

myScroll.scrollToElement(document.getElementById('TargetId'), 1000);

iScrollは構造上アンカーリンクが効かなくなってしまうので、代わりにこのscrollToElementを使用して機能を実装する必要があります。

他にも、現在のスクロール位置から相対的に移動するscrollByが存在しています。

以上

これで一応iOS7以下でもスクロールイベントを取得出来るようにはなるのですが、前述のとおり、iScrollは内側のラッパーをtranslateにより移動させることにより擬似的にスクロールイベントを再現している仕組みのため、アンカーリンクが正常に機能しません。他にも正常に動作しなくなる、または通常より実装に工数が大幅にかかってしまう機能がある可能性が高いので、使用にはかなり気をつける必要があります。

また、iOS7では動作することを確認しましたが、iOS7未満やAndroidでは動作未確認ですのでご注意ください。

以上、たにっぱでした〜

そこで今回は、シンプル・確実に現在の表示レイアウトを判断する方法をご紹介したいと思います。

現在の表示レイアウトの判断方法

どのように判断するかというと、スマホ時（もしくはPCレイアウト時）のみに出現する要素を目印として、それが表示されているのかされていないのかを元に判断します。
よく目印として使うのはスマホレイアウト時にのみ出るハンバーガーボタン（ナビ開閉のボタン）ですね。

具体例は以下のとおりです。

<style>
  #MqMark {
    display: block;
  }
  @media screen and (max-width: 640px) {
    #MqMark {
      display: none;
    }
  }
</style>
<div id="MqMark"></div>

上のようなPCレイアウト時のみ出現する要素を目印とします（そのような目印がない場合は作ってしまいましょう）。

javascript部分は以下のようになります。

<script>
  $(function() {
    $(window).on('resize', function(){
      if ($('#MqMark').is(':visible')) {
        // PCレイアウト
        console.log('pc');
      } else {
        // スマホレイアウト
        console.log('sp');
      }
    });
  });
</script>

この方法だと現在のレイアウトの状態を正確に取得出来るのでオススメです。

他の方法

他の方法として「window.matchMedia」を使用する方法があります。

if (window.matchMedia('screen and (max-width:640px)').matches) {
  // スマホレイアウト
  console.log('sp');
} else {
  // PCレイアウト
  console.log('pc');
}

以上

これからレスポンシブウェブデザインでjavascriptを書くという方や、これまでwidthを使って判定していたという方は是非今回ご紹介した方法を使ってみてください。

以上、たにっぱでした〜

$('#TargetID').attr('checked')

で取得しようとしたのですが、この取得方法には問題がありうまく状態を取得することが出来ませんでした。

そこで、今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。

取得方法

まず、結論として取得する方法を紹介します。

方法は下記の2通りです。

$('#TargetID').prop('checked')

$('#TargetID').is(':checked')

両方共、チェックされていればtrue、チェックされていなければfalseが返却されます。

個人的には後者の方が好みですが、どちらでも問題ありません。

また、checkedだけでなくselectedやdisabledといったプロパティに関しても、attrではなくpropやisを使った方法で取得しましょう。

実例

よくあるパターンとしては、フォームを送信する際、「同意する」チェックボックスにチェックが入っていない状況では送信ボタンが押せないようにするというものを例として挙げたいと思います。

HTML

<input id="AgreeBtn" type="checkbox">同意する<br>
<input id="SubmitBtn" type="submit" disabled>

JavaScript

$('#AgreeBtn').on('change', function(){
  if ($(this).is(':checked')) {
    $('#SubmitBtn').prop('disabled', false);
  } else {
    $('#SubmitBtn').prop('disabled', true);
  }
});

動作例

同意する

attrによる取得の問題点

これから先は正直知らなくてもあまり問題が無い内容なのですが、何故attrで状態を取得出来ないのか気になり調べてみたのでその内容を書いておきたいと思います。

$('#TargetID').attr('checked')

冒頭でも出したこのコードですが、一見普通に使えそうに見えますが、かなり問題があります。

というのも、checkedの取得にattrを使用した場合、返却値は「checked」か「undefined」になり、さらに対象がチェックされている状態でも状況によってはundefinedが返却されます。つまるところ全く使い物になりません。

これは

• attrがDOMの属性を元に値を取得する点
• checkboxにチェックを入れても、DOMの属性は変わらない点

この2点が理由です。

attrがDOMの属性を元に取得する

DOMの属性っていうのは例えば、

<a href="about.html"></a>

このaタグでいうとhrefが属性で、その値がabout.htmlですね。

では、今回問題になっているcheckboxの場合

<input type="checkbox" checked>

となるのですが、このHTMLは以下の内容と同じ意味を持ちます。

<input type="checkbox" checked="checked">

つまり、HTMLにcheckedを指定することは「checked属性にcheckedを指定」したのと同じ意味です。なのでattrでcheckedが帰ってくるわけですね。

逆にcheckedの指定がない場合は、そもそもchecked属性自体がDOMに存在していないのでundefinedが返却されることとなります。

checkboxにチェックを入れてもDOMの属性は変わらない

この画像はチェックボックスにチェックを入れた時のDOMの状態を開発ツールで表示したものなのですが、見てわかる通りチェックボックスにチェックが入っているのにcheckboxのDOMにはchecked属性が追加されていません。

attrはDOMの属性を引っ張ってくるので、今回のパターンのようにDOMの状態が変わらないものに関してはattrでは状態を取得しようが無いということです。

以上

propやisなんて関数は自分も最初は存在自体を知らなかったのですが、今回のように無いと困ることもあるのでぜひ覚えておきましょう。

以上、たにっぱでした〜

サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。

目次

• サイズ取得関係の関数
  • サイズ取得の基本
  • ページ全体のサイズやブラウザサイズを取得したい
• 要素の座標の取得方法
  • 座標取得の基本
  • 番外編：offsetParentってoffsetと関係あるの？
• スクロールした距離を取得する方法

サイズ取得関係の関数

サイズ取得の基本

サイズの取得には、以下の4つの方法があります。

各方法を画像でわかりやすくするとこんな感じです。

ここで注意しないといけないのは、width()はcssで設定したwidthとは違うという点です。

どういうことか、実例を示します。

<style>
  #Size1Box {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    border: 5px solid black;
    background: red;
    box-sizing: border-box;
  }
</style>

このようにborder-boxを指定した要素を用意します。この要素の各サイズを出力すると下記のようになります。

このように、スタイルでは「width: 100px」と指定したのに、width()の出力値が50となっているはずです。
これは、「box-sizing: border-box;」により「中身の幅 + padding + border = cssのwidth」となり、jQueryのwidth関数は「中身の幅」を返すためcssのwidthからpaddingとborder分差し引いた50pxが返されるという事です。

jQueryのwidth関数は「中身の幅」を取得するための関数ということに注意しましょう。
cssで設定されたwidthの値を取得したい場合は、

$('#IdName').css('width');

ページ全体のサイズやブラウザサイズを取得したい

document,windowを使用すれば可能です。

ページ全体のサイズは

$(document).width();
$(document).height();

ブラウザサイズは

$(window).width();
$(window).height();

で取得出来ます。（document,windowに対するinnerWidthやouterWidthは、widthと同じ値を返します。）

要素の座標の取得方法

座標取得の基本

cssのpositionはまだよくわからない、という方は、CSS positionを使ってみよう！や、見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話を参考に読んでみてください。

offset()とposition()は、

{
  top: xxx,
  left: xxx
}

という形の連想配列を返すので、topかleftのどちらかだけ必要、という場合は

var topOffset =  $('#IdName').offset().top;
var leftOffset = $('#IdName').offset().left;

というような書き方で片方だけを取得出来ます。

番外編：offsetParentってoffsetと関係あるの？

答え：ないです。

offsetParentは、positionが設定されている先祖要素の中で一番近い物を取得する関数です。

名前からoffsetと関係がありそうに見えてしまいますが、どちらかというと関係あるのはpositionですね。

スクロールした距離を取得する方法

どれだけページをスクロールしたかは「scrollTop」関数を使用します

var vScrollDistance = $(window).scrollTop();

また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。

var hScrollDistance = $(window).scrollLeft();

それぞれは下記のようなイメージです。

以上

以上がjQueryでのサイズ、座標取得方法のまとめでした。

サイズの取得なんかはwidthとinnerWidthがごっちゃになりがちなので注意しておきましょう。

以上、たにっぱでした〜。

この概念を知らないと、理解不能な状況に陥る事があるので、今回はバブリングを紹介したいと思います。

バブリングとは？

バブリングとは、「ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生する事」です。

上の画像のように、子要素をクリックしてclickイベントが発生すると、その親要素、祖先要素でもclickイベントが発生します。

具体例

以下の例では、表示されている3つのボックスが親子関係で、それぞれにclickイベントを設定し、クリックするとアラートを出すようにしています。

ここで、ChildBox(青色のボックス)をクリックすると、ChildBoxのアラートだけでなく、ParentBoxやAncestorBoxのアラートも発生するはずです、これがイベントのバブリングの実例です。

<style>
  .rectBox {
    width : 50%;
    height: 50%;
  }
  .rectBox.root {
    width : 200px;
    height: 200px;
  }
  .rectBox.black {
    background-color: #2c3e50;
  }
  .rectBox.red {
    background-color: #c0392b;
  }
  .rectBox.blue {
    background-color: #3498db;
  }
</style>

<script>
  $(function() {
    var $ancestor = $('#AncestorBox');
    var $parent   = $('#ParentBox');
    var $child    = $('#ChildBox');

    $ancestor.on('click', function(e) {
      alert('I am ancestor');
    });

    $parent.on('click', function(e) {
      alert('I am parent');
    });

    $child.on('click', function(e) {
      alert('I am child');
    });

  });
</script>

<div id="AncestorBox" class="rectBox root black">
  <div id="ParentBox" class="rectBox red">
    <div id="ChildBox" class="rectBox blue"></div>
  </div>
</div>

stopPropagationによるバブリングのストップ

この親にもイベントが発生していくバブリングの仕組みが都合が良い場合もあるのですが、問題がある場合も度々発生します。

その場合は、stopPropagationによりバブリングをストップさせることが可能です。

先ほどのバブリングの例を、stopPropagationを使用してバブリングしないようにした例は以下の通りです。

<script>
  $(function() {
    var $ancestor = $('#AncestorBox');
    var $parent   = $('#ParentBox');
    var $child    = $('#ChildBox');

    $ancestor.on('click', function(e) {
      alert('I am ancestor');
      e.stopPropagation(); // 追加
    });

    $parent.on('click', function(e) {
      alert('I am parent');
      e.stopPropagation(); // 追加
    });

    $child.on('click', function(e) {
      alert('I am child');
      e.stopPropagation(); // 追加
    });

  });
</script>

今回のパターンだと、ChildBoxをクリックした場合でもアラートは１回しか発生しなかったはずです。

また、stopPropagation以外に「return false」でもバブリングをストップすることが可能です。

「return false」にはバブリングのストップ以外に、要素本来のイベントの動作（aタグの場合clickイベントに反応してリンク先に飛ぶ、等）をしないようにする効果もあるので、状況に応じて使い分けましょう。

mouseover/mouseoutとmouseenter/mouseleaveの違い

要素上にマウスが乗った・離れた際に発生するmouseover/mouseout及びmouseenter/mouseleaveイベントの違いの一つはイベントのバブリングが発生するか否かです。

mouseover/mouseoutイベントではバブリングが発生しますが、mouseenter/mouseleaveイベントはバブリングが発生しません。

具体例

実際に問題が発生する具体例として、「赤い領域にマウスが乗ったら、領域が一回点滅するような演出」を実装する必要が出てきたとします。

何も考えずにmouseoverを使用した場合、下記のような実装をしてしまうと思います。

<script>
  $(function() {
    $('#MouseWrapper .parentBox').on('mouseover', function(e) {
      $(this).animate({
        opacity: '0.5'
      }, 'fast').animate({
        opacity: '1'
      }, 'fast');
    });
  });
</script>

<style>
  #MouseWrapper .parentBox {
    width: 100px;
    height: 100px;
    padding: 50px;
    background-color: #c0392b;
  }
  #MouseWrapper .childBox {
    width: 100px;
    height: 100px;
    background-color: #2c3e50;
  }
</style>

<div id="MouseWrapper">
  <div class="parentBox">
    <div class="childBox"></div>
  </div>
</div>

この場合、赤い領域にマウスを乗せたときにちゃんと点滅しますが、何故か黒い領域にマウスが乗った時も点滅してしまいます。

この原因は、mouseover/mouseoutがバブリングを発生させるため、黒い領域に対してmouseoverイベントが発生した際に、親要素である赤い領域にもmouseoverイベントが発生してしまうためです。

他にも、mouseover/mouseoutイベントは子要素から親要素にマウスが移動した際にもmouseoverイベントが発生してしまうため、その時にも点滅してしまいます。

mouseover/mouseoutのようなマウスホバーイベントに関してバブリングが発生してほしい状況もあるかもしれませんが、どちらかというとバブリングしてしまうことによって問題が発生してしまう事が多いためmouseenter/mouseleaveを基本的には使用した方が良いと思います。

以上

バブリングは結構ややこしい概念なのですが、理解しておかないと原因がわからない挙動が発生したりして解決に時間がかかってしまうことがありそうなので、出来るだけ早く理解しておいた方がいいかと思いました。

【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。

こんばんちわ、やのっぱです(´・ω・｀)v

今回は良く利用するJQueryライブラリ、tile.jsの使い方をお話していきます。
それではやっていきましょう。

まずは設置から

まずはダウンロードし、設置をしていきます。

配布元のjquery.tile.js Demosから【Download compressed】(compressedはmin化、uncompressedは展開された状態です)を右クリックで保存、またはクリックして出てきたソースを保存またはコピペしてjquery.tile.jsの名前で保存し任意のフォルダに格納します。

次に、jQueryとjquery.tile.jsをhead内に読み込み、使用出来るようにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="格納場所のパスをいれます/jquery.tile.js"></script>

これでとりあえず読み込まれ使用出来る状態です。

このようなHTMLを用意してみました。
画像とテキストの入ったliですね。
これにtileを適応すると、一番高さがあるものに揃います。

<ul class="testList clearfix">
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
</ul>

指定class全てに適用

使用方法は至って簡単です。
head内にこちらを記述します

<script type="application/javascript">
  $(function(){
    $(".testBox").tile();
  });
</script>

これで、class .testBoxがついている要素全てが一番高い要素の高さになります。
しかし、これだと具合がわるいこともしばしばです。
なので、グループ分けをすることもできます。

個数を指定して適用

<script type="application/javascript">
  $(function(){
    $(".testBox").tile(4);  
  });
</script>

このように.tile();の()の中に数字をいれることで数字の数ごとで揃わせることができます。
4であるならば、.testBox4つずつ揃うようになります。

テキストのみの場合はこれでOKです。
上記のHTMLのように画像が入っているとなると、多少付け足しが必要になってきます。
画像が入っていると、画像を読み込む前にtile.jsが実行されてしまうからです。
付け足したのがこちらです

画像を含む場合の記述

<script type="application/javascript">
  $(window).load(function(){
    $(".testBox").tile(4);
  });
</script>

$(function～のところを$(window).load(function～とつけたすことで、画像を読み込んでから実行となります。
これで、画像を含んだ場合でも崩れることはなくなります。
簡単な記述で実装でき、とても便利なのでぜひ使用してみてください。それではっ