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

比如

 <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>
阅读 4.6k
7 个回答

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

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

 <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])+"...";
                     }
                 }
             }  

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

var jqobj = $("ul li");

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

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

});
不知道对不对

    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;
            }
        }
    }
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

如果非得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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题