Question

我有这样的东西：

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

如果嵌套的项目超过3个，我需要向ul元素添加一个类。

Answer 1

首先，您必须得到想要的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>

Answer 2

使用查询选择器，并检查有多少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>

Answer 3

只需获取您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>

Answer 4

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

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>

如果嵌套的<li>超过2个，则将类添加到<ul>

4 个答案: