jquery 如果< ul>有2个以上< li>的嵌套,则将类添加到

tvz2xvvm  于 2022-12-22  发布在  jQuery
关注(0)|答案(5)|浏览(143)

我有这样的东西:

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

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

luaexgnf

luaexgnf1#

首先,您必须能够获得所需的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>
rqqzpn5f

rqqzpn5f2#

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

dphi5xsq3#

只要得到你的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>
rqcrx0a6

rqcrx0a64#

我希望你想运行的代码可能是动态的,你只想在标签上添加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>
xam8gpfp

xam8gpfp5#

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>

相关问题