Question

我需要使用jQuery更改div中项目的css display值。我需要做的是，获取div元素中的项目数。（例外）。

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

我该怎么做？

我可以使用此代码获取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()在您的div中显示前6个li。

<强>演示

$(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>

Answer 2

这里有一个非常简单的方法，只用slice()方法显示前6个元素，请检查：

if($('#my-div > li').size() > 6){
    $('#my-div > li').slice(6).hide()
}

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

Answer 3

如果索引大于N，您可以循环列表并隐藏它。指数从0开始

＆＃13;

$('.container > li').each(function(i, e) {
  if (i >= 6) { $(this).hide() }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

＆＃13;

Answer 4

使用jQuery选择器:gt

的另一种方法

 $('#my-div li:gt(5)').hide(); //Index starts from 0 so 5 is 6

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

Answer 5

＆＃13;

>>> a = np.array([[1,2], [3,4], [5,6]])
>>> a.tolist()
[[1, 2], [3, 4], [5, 6]]

＆＃13;

$(document).ready(function(){
$("ul li:gt(5)").hide(); 
//List elements with an index > 5
});

＆＃13;

在div内给定数量的项目之后更改css类

5 个答案: