切片不针对所有实例

Question

我的页面中有一系列的跨度，我在其中使用一个类来控制各种样式。当条件发生变化时，我想同时对这些类应用更改。

示例：

<SPAN class="zrow_1">...</SPAN>
<SPAN class="zrow_2">...</SPAN>
<SPAN class="zrow_3">...</SPAN>

... ... 更多代码下载页面 ... ...

<SPAN class="zrow_1">...</SPAN>
<SPAN class="zrow_2">...</SPAN>
<SPAN class="zrow_3">...</SPAN>

现在我知道我可以单独定位每个班级并且效果很好。但是为了清理我的代码并节省了一些时间我试图使用切片。

$("SPAN[class^='zrow_']").slice(2).css({'display': 'none'});

现在上面的内容适用于隐藏跨度的页面上的第一个实例;但是，第二组跨度不是。我做错了吗？

Answer 1

这是因为你拥有的选择器将返回所有六个，但你只隐藏其中两个。

我会选择类名并用逗号分隔。

$("span.zrow_1, span.z_row_2").css({'display': 'none'});

Answer 2

通过使用切片，您只在整个页面中获取前两个结果，而不是在每组元素中。我会使用.filter：

$("SPAN[class^='zrow_']").filter(function() {
    return parseInt($(this).prop("class").substring(5),10) <= 2;
}).hide();

这将返回所有zrow_1和zrow_2元素。您可以将硬编码的2更改为要将操作应用到的任意元素。

Example jsFiddle

Answer 3

我可以看到问题所在。切片中的索引是从零开始的。

检查：https://api.jquery.com/slice/。

更改$（＆＃34; SPAN [class ^ =＆＃39; zrow _＆＃39;]＆＃34;）。slice（2）.css（{＆＃39; display＆＃39;：＆## 39;无＆＃39;}）;到

$（＆＃34; SPAN [class ^ =＆＃39; zrow _＆＃39;]＆＃34;）。slice（1）.css（{＆＃39; display＆＃39;：＆＃39;无＆＃39;}）;应该工作。

非常感谢。