遍歷li元素，然後在一些li元素上添加.addclass css

Question

我遍歷li元素，然後將css應用於某些滿足條件的li元素。

可以說，我然後我將使用JavaScript CSS類.addclass hide_me上立計11至15

此具有15總的裏元件UL是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>

1. 使用:gt()選擇。無需重複李
2. 指數開始在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/