Question

我需要以某种方式为超出特定阈值的每个元素添加内联样式。要以代码格式解释这一点，我的样本就是：

>SO_50684988.cmd
Visa:  R$ 9.766,53

Elo:  R$ 423,65
Hipercard:  R$ 514,51
Sorocred:  R$ 492,63

我的第一个想法是var listItems = $(".subitem"); listItems.each(function(index, value) { console.log(listItems.length); if (listItems.length > 5) { // for every ".subitem" that is the 6th, 7th or however many but // beyond the fifth, inject an inline style } }和nth-child，但是这两个标记都松散地跟随，如下所示：

nth-of-type

使用此标记结构（无法更改），我如何最好地遍历<div> <div class="subitem"></div> </div> <div> <div class="subitem"></div> </div> <div> <div class="subitem"></div> </div>的每个实例，并为超出限制的事件添加内联样式？

Answer 1

如此接近。如您所见，循环遍历列表项时会传入索引。如果您看到索引超过4（即在第5个元素之后），那么您可以使用jquery来应用您想要的样式。

var listItems = $(".subitem");
    listItems.each(function(index, value) {
        if (index > 4) {
            // apply styling specific to elements 6 and beyond
        }
 }

Answer 2

可以使用:gt()选择器或slice()进行过滤，以排除低于值集的索引。

listItems.filter(':gt(4)').each(function(){
   $(this).doSomething()       
})
// or
$(".subitem:gt(4)").each(function(){...
// or using slice()
listItems.slice(4).each(function(){

Answer 3

您正在检查长度是否超过6而不是检查元素本身是否超过6。

由于参数'index'是您在此mooment中迭代的元素的位置，您应该使用它：

   var listItems = $(".subitem");
listItems.each(function(index, value) {
    if (index > 5) {
        $(this).css("color","red");
    }
 });

选择元素的出现但不是儿童

3 个答案: