JavaScript 和 Jquery If 语句追加

Question

好的，我有一个列表，列表中的一些文本太长，所以我想使用 JavaScript 和 Jquery 来 trim 文本，如果超过 30 个字符，则将 ... 添加到测试的末尾。

<ul>
    <li><a href="#">Long List item Long List item Long List item </a></li>
    <li><a href="#">Smaller List item</a></li>
    <li><a href="#">item</a></li>
</ul>

目前我的 Jquery:

$(function(){
    $("ul li a").html(function(){
        return $(this).html().substring(0,30);
    });
    $('.box ul li a').append(' ...');
});

这行得通，但我可能想添加一个 IF 语句，以便仅在标签内的文本长度超过 30 个字符时才添加 ...。我该怎么做？

谢谢

Answer 1

在创建子字符串的函数中测试长度，并在其中添加省略号。

$(function(){
    $("ul li a").html(function(i, html){
        return html.length > 30 ? html.substr(0, 30) + " …" : html;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Long List item Long List item Long List item </a>
  </li>
  <li><a href="#">Smaller List item</a>
  </li>
  <li><a href="#">item</a>
  </li>
</ul>

顺便说一句，元素的当前 HTML 作为参数传递给回调函数，因此您不需要在其中使用 $(this).html()。