ミギムキ

[jQuery] サイドメニューの中途半端な改行を防ぎたい

中途半端に改行したメニューと対策を施したメニュー

サンプルコード

html

<ul class="list_split"> <li><a href="#">サイコロ1</a></li> <li><a href="#">サイコロ2 西日本完全制覇</a></li> <li><a href="#">サイコロ3 自律神経完全破壊</a></li> <li><a href="#">サイコロの旅4 日本列島完全制覇</a></li> <li><a href="#">サイコロの旅5 キング・オブ・深夜バス</a></li> </ul>
スポンサー広告

CSS

.list_split > li > a > span { display: inline-block; margin: 0px 0.5em 0px 0px; }

jQuery

jQuery(function($) { if($('.list_split').length) { $('.list_split > li').each(function() { var tag = $(this).find('a'); var texts = tag.text().split(/[\s ]+/); var wrap_text = ''; $.each(texts, function(i, value) { wrap_text += '<span>' + value + ' </span>'; }); tag.html(wrap_text); }); } });
  • 「.list_split」クラスが設定されたulリストの中にあるliタグをeachループで回します
  • liタグの中にあるaタグを取得。aタグ内の文字をスペース区切りで分割し、分割したそれぞれのブロックをspanタグで囲んでいます
スポンサー広告

補足・説明

var texts = tag.text().split(/[\s ]+/); tag.html(wrap_text);