Javascript 在CSS排序后定位第一个元素

请参阅此代码笔：

我需要在第一个元素被css“order”属性排序后定位它，并给它另一个css属性

是否有一些jQuery或其他东西可以用来查找排序后的第一个元素，然后查找addClass或其他东西？非常感谢你的帮助

.wrap{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.特色{
顺序：1；
}
.正常{
顺序：2；
}
.包裹部{
弹性基准：50%；
背景：ddd；
边框：2倍实心#000；
}
/*这是我需要帮助的部分，因为它应该只应用于应用“order”属性后的第一个元素*/
.wrap div：类型的第一个{
弹性基准：100%；
背景：#f00；
}

wp\u查询1输出：
正常的
正常的
特色商品
正常的
特色商品
正常的
wp_查询2输出：
正常的
正常的
正常的
正常的

您可以按

位置（）对内部div进行排序。顶部

并在第一个div上应用样式

$（'.wrap'）。每个（函数（）{
var sort=$（this.find（'div'）.sort（函数a，b）{
返回$（a）.position（）.top-$（b）.position（）.top
})
$（排序[0]）.addClass（'first'）
})

.wrap{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.特色{
顺序：1；
}
.正常{
顺序：2；
}
.包裹部{
弹性基准：50%；
背景：ddd；
边框：2倍实心#000；
}
第一分区{
弹性基准：100%；
背景：#f00；
}

wp_查询1输出：
正常的
正常的
特色商品
正常的
特色商品
正常的
wp_查询2输出：
正常的
正常的
正常的
正常的

我不知道“先到先得”之类的解决方案有哪些（随着

order

越来越被广泛采用，这会很方便），所以它可能需要基于脚本的解决方案（遗憾的是）

您已经指出，一个涉及对元素重新排序的解决方案可能适合您。如果是这样，那就太容易了。：-）见评论：

//告诉我们元素优先级的辅助函数（低数值=高优先级）
函数getPriority（$el）{
返回$el.hasClass（“特色”）？0:$el.hasClass（“正常”）？1:2；
}
//对于每个包装容器。。。
$（“.wrap”）.each（函数（）{
var$this=$（this）；
//获取其子元素的数组
var a=$this.children（）.get（）；
//对它进行排序，先放特色，然后放普通，再放其他
a、 排序（功能（a、b）{
返回getPriority（$（a））-getPriority（$（b））；
});
//将它们附加到父对象，从而移动它们
$this.append（a）；
});
.wrap{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.包裹部{
弹性基准：50%；
背景：ddd；
边框：2倍实心#000；
}
/*只需将第一个div设置为突出显示的div*/
.wrap div：类型的第一个{
弹性基准：100%；
背景：#f00；
}
wp\u查询1输出：
正常的
正常的
特色商品
正常的
特色商品
正常的
wp_查询2输出：
正常的
正常的
正常的
正常的
替代@Nenad Vracar建议的位置top的另一种方法是实际过滤每组中具有最小
顺序的元素，并突出显示第一个元素（根据dom顺序）


$（'.wrap'）。每个（函数（）{
var items=$（this）.children（），
minOrder=无穷大，
详细信息=项目.map（功能（i，el）{
var order=+$（el.css（'order'）；
如果（minOrder>order）minOrder=order；
返回{
元素：el，
订单：订单
};
}).get（），
firstElement=详细信息。过滤器（函数（项）{
退货项目。订单==最小订单；
})[0];
$（firstElement.element）
.addClass（“突出显示”）
.兄弟姐妹（）
.removeClass（“突出显示”）；
});
.wrap{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.特色{
顺序：1；
}
.正常{
顺序：2；
}
.包裹部{
弹性基准：50%；
背景：ddd；
边框：2倍实心#000；
}
/*这是我需要帮助的部分，因为它应该只应用于应用“order”属性后的第一个元素*/
.wrap.highlight{
弹性基准：100%；
背景：#f00；
}

wp_查询1输出：
正常的
正常的
特色商品
正常的
特色商品
正常的
wp_查询2输出：
正常的
正常的
正常的
正常的
因此，在wp_query 1输出中，您希望第一个“特色项目”是红色且100%宽的项目，而不是第一个普通项目？您需要与
订单相关的通用解决方案，还是与上述标记和样式相关的特定解决方案？我认为这是不可能的，由于类型的
：n和其他基于CSS位置的选择器（以及JS）作用于DOM中元素的位置。
order
规则不会影响DOM-如果使用inspector进行检查，可以看出这一点。这与添加内容的伪选择器的问题类似。我建议您更改逻辑以在JS中进行排序。虽然不理想，但它可以解决问题，也意味着代码在跨浏览器中工作得更好，因为
order
还没有得到很好的支持，尤其是在IE中，使用CSS实现这一点很难，更不用说
order
在旧浏览器中不可用。你能在生成html时控制元素的顺序吗？T.J.Crowder：一个特定的可能对我来说是最好的，但是对于其他通过google出现在这里的人来说，一个通用的解决方案可能会更好。很好的解决方案，如果出于其他原因需要相关的CSS。谢谢你的帮助，TJ这很好，谢谢你。我最终采用了这个解决方案。