li要素を反復し、いくつかのli要素に.addclass CSSを追加

Question

私はli要素を反復して、私の基準を満たすいくつかのli要素にCSSを適用しています。

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

：

は、HTMLである私は、私はCSSクラス15

これに対するLi数11にhide_me .addclass JavaScriptを使用しますULに李要素の15合計を持って言うことができます

私には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()セレクタを使用してください。マッチしたセット内のインデックスよりも大きいインデックスにあるすべての要素を選択します。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/