メニュータイトル内の単語数をカウントし、長さに応じてスライスし、改行を追加します。

Question

次のjQueryスクリプトがあります。メニュー項目タイトルのテキストをフィルタリングし、最初の後に<br>を挿入するように修正する必要があります。タイトルに3つ以上の単語がある場合、タイトルに2つの単語しかない場合、または2つ目の単語の後に2つの単語がある場合は単語。メニュー項目の表示方法を示すデザインプロトタイプのスクリーンショットを添付しました。

(function($){ 
    $(document).ready(function(){  
     var node = $("#navigation li a").contents().filter(function() { return this.nodeType == 3 }).first(), 
     text = node.text(), 
     first = text.slice(0, text.indexOf(" ")); 

     if (!node.length) 
      return; 

     node[0].nodeValue = text.slice(first.length); 
     node.before(first + '<br/>'); 

    }); 
})(jQuery); 

Answer 1

アプローチ下記をご覧持ってしてください：ここでは

(function($) { 
 
    $(document).ready(function() { 
 
    $("#navigation li a").each(function() { 
 

 
     var text = $(this).text(); 
 
     var wordArray = text.split(" "); 
 
     if (wordArray.length == 2) { 
 
     $(this).html(wordArray.join('</br>')); 
 
     } else if (wordArray.length > 2) { 
 
     $(this).html(wordArray.slice(0, 2).join(' ') + '</br>' + wordArray.slice(2).join(' ')); 
 
     } 
 

 
    }); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul id="navigation"> 
 
    <li><a>First Menu</a> 
 
    </li> 
 
    <li><a>Two Words</a> 
 
    </li> 
 
    <li><a>More Than Two</a> 
 
    </li> 
 
    <li><a>More Than Four Words In Menu</a> 
 
    </li> 
 
</ul>

を私たちは、ナビゲーションメニューの一部であるすべての<a>タグを反復処理され、単純にテキストの長さをチェックするためにテキストを取得しています。