Question

我正在迭代li元素，然后在符合我标准的某些li元素上应用css。

假设我在 ul 中总共有15个 li 元素，那么我将在li计数11到15上使用javascript .addclass hide_me进行css课程。

这是html：

<ul>
    <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>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
</ul>

我想使用JavaScript / jquery

<ul>
    <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>
    <li>item 9</li>
    <li>item 10</li>
    <li class="hide_me">item 11</li>
    <li class="hide_me">item 12</li>
    <li class="hide_me">item 13</li>
    <li class="hide_me">item 14</li>
    <li class="hide_me">item 15</li>
</ul>

到目前为止，我想出了这个JavaScript代码，但它没有用。

我的Javascript：

<script>
$(document).ready(function(){
   $.each($('.items'), function() {
       var children = $(this).find(">li");
       var count_items = children.length;

        for (var items = 11; items < count_items; items++) {
        //console.log(items); //output 11, 12, 13, 14, 15
        $(".items li:nth-of-type("+ items +")").addClass('.hideme'); // this is css selector by nth-type 
        }
   });
});
</script>

Answer 1

$('ul li:gt(9)').addClass('addedclass')

.addedclass{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <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>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
</ul>

使用:gt()选择器。无需迭代li
索引从0开始

描述：选择匹配集中索引大于索引的所有元素。

Answer 2

试试这个

$("li").each(function(k,v){
  if(k>9)
    $(this).addClass("hide-me");
});

// Apply css on class applied

$(".hide-me").css({ 'color':'red'});

https://jsfiddle.net/sum1/yzubc169/

迭代li元素然后.addclass css在一些li元素上

2 个答案: