javascript - 在 div 中给定数量的元素后更改 css 类

Question

我需要使用 jQuery 更改 div 内元素的 css display 值。我需要做的是，获取 div 元素内的元素数。 (Ex- li 元素)。

如果 div 中 li 元素的数量超过 6，我需要为它们设置 display:none css 值，而前 6 个 li 项保留 display:block

我该怎么做？

我可以使用这段代码获取 div 中 li 元素的数量，

$(window).ready(function () {
    var itemCount = 1;
    if ($(window).width() < 768) {
        if ($('#my-div li').length > 6) {
            var k = $('#my-div li').length;
            alert("no of items =" + k);
        }
    }
});

我怎样才能做到这一点？

Answer 1

您可以使用 $('#my-div li').not(":lt(6)").hide() 来显示前 6 个 li 在你的 div 中。

演示

$(window).ready(function() {
  var itemCount = 1;

  if (true) { // changed < to > for the example

    if ($('#my-div li').length > 6) {
      var k = $('#my-div li').length;
      alert("no of items =" + k);
      $('#my-div li').not(":lt(6)").hide()
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</div>