问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用原生js截取所有li的文本内容并代替原本的内容

头像
唱遇见的风行
    7551723

    比如

     <ul>
    <li>aaaaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaaaa</li>
 </ul>
 如果li的长度大于5 则显示
 <ul>
    <li>aaaaa...</li>
    <li>aaaaa...</li>
    <li>aaaaa...</li>
    <li>aaaaa...</li>
    <li>aaaaa...</li>
 </ul>
    javascripthtml
    阅读 4.6k
    7 个回答
    得票最新
    头像
    idleb
      27714

      这种需求一般不都是用text-overflow:ellipsis来实现吗

      头像
      Garrosh
        2874

        这不是一个遍历的事情吗？

        头像
        陌路凡歌
          7.9k21119
           <li limit="5">aaaaaaaaaaaaaaa</li>

             var limit=[];
             var Text=[];
             var Pox=document.getElementsByTagName('*');//不要*自己改什么节点下的XXX
             for(var i=0;i<Pox.length;i++){
                 if(Pox[i].getAttribute("limit")){
                     limit[i]=Pox[i].getAttribute("limit");
                     Text[i]=Pox[i].innerHTML;
                     if(limit[i]<Text[i].length){
                         Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
                     }
                 }
             }
          头像
          甄明星
            933311

            jq选择器选中，遍历，判断，操作。

            var jqobj = $("ul li");

            $.each(jqobj,function(i,n){

            var text= n.innerHtml;
var length= text.length;
if(length>5){
 $(n).html("aaaaa...")
}

            });
            不知道对不对

            头像
            nicezhu
              83621939
                  var ul = document.getElementById('uldom');
    //获取ul下的所有子元素
    var ulChildren=ul.children;
    for(var i in ulChildren){
        //判断是否是dom节点并且是li
        if(ulChildren[i].nodeType===1 && (ulChildren[i].tagName).toLowerCase()==='li'){
            //获取dom节点内容
            var e_val=ulChildren[i].innerHTML;
            if(e_val.length>5){
                var r_val=e_val.substring(0,5)+'...';
                ulChildren[i].innerHTML=r_val;
            }
        }
    }
              头像
              阿蛇
                3k31733
                const limit = 5;
const list = document.querySelectorAll("ul li");
Array.prototype.forEach.call(list, li => {
    li.innerHTML.length > limit  ? li.innerHTML = `${li.innerHTML.substr(0, limit)}...` : ""
});

                clipboard.png

                clipboard.png

                头像
                testnullundefine
                  2.5k32141

                  如果非得javascirpt：

                  <body>
    <ul>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
        <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
    </ul>
</body>
<script>
    var limitText = {
        list: [],
        length: 5,
        init: function (sel, length) {
            this.list = document.querySelectorAll(sel);
            this.length = length || 5;
            this.work();
        },
        work: function () {
            var _this = this;
            this.list.forEach(function (item) {
                item.innerText.length > _this.length ? item.innerText = item.innerText.substring(0,_this.length) + "..." : false;
            });
        }
    }
    limitText.init("li",10);
</script>
                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题