Webページ制作時において、＜li＞や＜img＞などのインライン要素に対して
HTMLソース上でタグ間を改行させると半角スペースほどの空白（余白）が発生してしまい
扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。
jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験
まず単純に＜li＞をインライン要素として
下記の様にHTML上に記載すると・・・
◆HTML <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul>
これをこのままブラウザで実行させると
下記の様に数字の間に半角スペースほどの空白が発生します。
※空白が分かりやすいように各数字にはCSSでボーダーをつけてあります。
この空白は＜li＞～＜/li＞の後ろで改行させることで発生している現象なので
HTML上で改行をコメントアウトさせる方法で消すことも可能です。
◆HTML <ul> <li>1</li><!-- --><li>2</li><!-- --><li>3</li><!-- --><li>4</li><!-- --><li>5</li><!-- --><li>6</li><!-- --><li>7</li><!-- --><li>8</li><!-- --><li>9</li><!-- --><li>10</li> </ul>
もしくは改行位置をタグの途中で行うやり方なども。。
◆HTML <ul> <li>1</li ><li>2</li ><li>3</li ><li>4</li ><li>5</li ><li>6</li ><li>7</li ><li>8</li ><li>9</li ><li>10</li> </ul>
これらの方法で空白を削除させることもできますが
あまり見栄えが良いものではないと思っています。
そこでHTMLソースは＜li＞～＜/li＞の後ろで改行させる形のままで
発生する空白をjQueryを使って削除してみます。
スクリプトは以下の様に。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var setElm = $('li');
$(window).load(function(){
setElm.each(function(){
var self = $(this);
$(this).parent().append(self);
});
});
});
</script>
これを実行させると以下の様に空白が消えた状態になります。
「＜li＞：jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験」サンプルを別枠で表示
構造としては＜li＞それぞれを一旦抜き出して
親要素＜ul＞に再度入れ直すことで改行を取っている状態にしています。
スクリプト5行目の
| var setElm = $(‘li’); | 実行させるインライン要素 |
|---|
が実行させる対象インライン要素になっています。
この方法では、対象要素が親要素と子要素の組み合わせになっていれば
＜ul＞と＜li＞の組み合わせでなくても実行可能になっています。
例えば＜div＞と＜span＞の組み合わせの場合。
◆HTML <div class="setList"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> </div>
実行対象を以下の様に記述します。
※5行目の実行する対象要素以外の部分は変化ありません。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var setElm = $('.setList span');
$(window).load(function(){
setElm.each(function(){
var self = $(this);
$(this).parent().append(self);
});
});
});
</script>
これを実行させたパターン。
（見た目は変わりありません・・・）
「＜span＞：jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験」サンプルを別枠で表示
このインライン要素をHTML内で改行することで発生する空白の削除は
他にもCSSを使って「float」させる方法や
「display:inline-block」を適用させて削除する方法などなど
やり方は様々ありますが、いくつか削除方法を知っておくと
その時々の状況によって使い分けができ便利になるかと思っています。
jQueryでインライン要素を改行させた際の空白を削除する際にぜひ。。。