jquery – 获取除第一个和最后一个行以外的所有行
我想dynamic地将一个类添加到除了第一行和最后一行之外的所有行。 我怎么会这样做,而不分配一个CSS类的行来识别它们。 我现在正在取得第一排
$("#id").find("tr:gt(0)")
我需要结合这个not("tr:last")
或许?
放下gt()
,因为我认为它比:first
慢一点点。
结合使用not()
:first
和:last
:
$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
大多数浏览器自动在表标记中添加一个tbody
元素(如果缺less的话),这就是为什么直接子select器失败 – 没有<tr>
元素作为<table>
标记的直接子元素。
我不是100%确定这是所有浏览器都这样做的,所以只需手动添加<tbody>
会更安全。 否则,你需要一点嗅,不能作为一个单一的class轮:
if($('table#tbl > tbody').size() > 0) { $('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight'); } else { $('table#tbl > tr').not(':first').not(':last').addClass('highlight'); }
希望这可以解决你的问题!
尝试这个:
.not(':first').not(':last')
为什么不是这个?
$('table tr:not(:first-child):not(:last-child)');
作为纯粹的CSSselect器也是如此。
您可以通过用逗号分隔select器来将.not()
方法合并为一个:
$('#id tr').not(':first, :last'); $('#id tr:not(:first, :last');
请注意,第二个在纯CSS中无效,只能作为jQueryselect器。 对于纯粹的CSS,你必须使用@ Sumit的答案。
奇怪的build议张贴没有工作,他们应该都工作! 但…
如果它不起作用,这样做…稍慢,但必须工作! 尝试:
$('table#tbl tr').addClass('highlight'); $('table#tbl tr:first-child').removeClass('highlight'); $('table#tbl tr:last-child').removeClass('highlight');
您也可以使用.slice()
方法从集合中删除第一个/最后一个元素:
$('table tr').slice(1, -1);
.slice()
方法本质上是创build一个新的jQuery对象,其中包含在初始集中指定的元素的子集。 在这种情况下,它将排除索引为1
和-1
的元素,它们分别是第一个/最后一个元素。
例:
$('table tr').slice(1, -1).css('background-color', '#f00');
table { width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td>1</td></tr><tr><td>2</td></tr> <tr><td>3</td></tr><tr><td>4</td></tr> <tr><td>5</td></tr><tr><td>6</td></tr> </table>