遍历 li 元素，然后在一些 li 元素上遍历 .addclass css

Question

我正在遍历li元素，然后在一些符合我条件的li元素上应用css。

假设我在ul中总共有 15 个 li 元素，那么我将使用 JavaScript .addclasshide_me对li计数 11 到 15 进行 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>

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/