javascript - 计算菜单标题中的单词数，根据长度切片，然后添加换行符

Question

我有以下 jQuery 脚本，我需要修改它以允许我过滤菜单项标题中的文本并插入 <br>如果标题中只有两个词，则在第一个词之后；如果标题中有三个或更多词，则在第二个词之后。我附上了设计原型(prototype)的屏幕截图，显示了菜单项应如何显示。

(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>标签是我们导航菜单的一部分，我们只是获取它们的文本来检查它的长度。