javascript - 根据值长度向元素添加 CSS 类

Question

我构建了一个菜单，当菜单项变得太长时，我想更改一些 CSS。这是我所拥有的，但它不起作用:

<script>
    var item1 = document.getElementByClass('nm-item-link-l');
    var item2 = document.getElementByClass('nm-item-link');
    if (item1.length > 20) {
        changeit = document.getElementByClass('nm-item-link-l').addClass('addclass');
    } else {
        ;
    }
    if (item2.length > 20) {
        changeit2 = document.getElementByClass('nm-item-link-l').addClass('addclass');
    } else {
        ;
    }
</script>

Answer 1

document.getElementByClass

不是一个有效的 js 函数，除非你自己定义了它。您可能希望 getElementByClassName 与 addClass 相同。 addClass 是一个有效的 jQuery 方法，但不是标准的 javascript 函数。

根据评论更新

因为您似乎正在使用 jQuery

   var list1 = $(".nm-item-link-l");
   var list2 = $(".nm-item-link");

   if (list1.length > 20) {
       list1.addClass("addClass");
   }
   if (list2.length > 20) {
       list2.addClass("addClass");
   }

更新#2，

因为您似乎想按字长进行过滤:

   var list1 = $(".nm-item-link-l");
   var list2 = $(".nm-item-link");
   list1.each(filterFunc);
   list2.each(filterFunc);

   function filterFunc(index,value){
     if (parseInt(value).text().length > 20) {
         $(value).addClass("addClass");
     }
   }