首先，您必须能够获得所需的ul > li，然后可以轻松地检查长度并应用类

var liList = document.getElementById("mylist").getElementsByTagName("li");
if (liList.length > 3) {
    document.getElementById("mylist").className += " customlist";
}

.customlist {
  color: red;
}

<ul id="mylist" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

使用查询选择器，检查有多少li元素是ul的直接子元素：

const items = [...document.querySelectorAll("ul > li")];
if (items.length > 3) {
  document.querySelector("ul").classList.add("lots");
}

.lots {
  background-color: navy;
  color: white;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

只要得到你的ul中的项目计数，然后如果计数超过3然后添加类...

$( document ).ready(function() {
    var itemCount = $("ul > li").length
    console.log(itemCount);
    if(itemCount => 3) {
      $("ul").addClass("className");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

我希望你想运行的代码可能是动态的，你只想在标签上添加CSS类时，列表大于3。

const listItems = document.querySelectorAll('ul li');
listItems.length > 3 ? listItems[0].parentNode.classList.add("my-ul-class"): 
listItems[0].classList.remove("my-ul-class");

.my-ul-class {
color: green;
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

var liList = document.getElementById("mylist").getElementsByTagName("li");
if (liList.length > 3) {
    document.getElementById("mylist").className += " customlist";
}

.customlist {
  color: red;
}

<ul id="mylist" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>