javascript - CSS flex : last and first item in a row selector

Question

我在尝试选择 flex 容器第一行的最后一个元素和最后一行的第一个元素时遇到问题。

我的 flex 容器是 flex-wrap: wrap; 我所有的元素都是 flex: auto; 它们有不同的大小，通过 flex auto 我让元素适合在我的容器上对齐，我的 Angular 元素有各自的圆 Angular 。

但是，问题是，我正在隐藏和显示带有事件的元素(比如单击)，并且我需要在每次更改时将 Angular 元素设置为圆 Angular ，如果它有一个网格容器，我可以通过 nth-child 因为它永远不会改变列数。但是在 flex 中，每行的元素数量不同。

我想出了一个 Jquery 解决方案(链接如下)，但我认为它很吸引人而且很大，可能有更聪明的方法或我不能使用的简单选择器。

请帮我想出一个更好的代码，这样不仅我不能很好地利用它。

http://jsfiddle.net/aj1vk0rv/

编辑:只是改进了一点代码 http://jsfiddle.net/aj1vk0rv/1/

Answer 1

我没有看到任何简单的解决方案，但这种方式有点干净:

var fun = function () {
var flex = $(".container");
var cw = flex.width(); // container width
var ch = flex.height(); // container height

var tl = $(".ui-widget:visible:first");
var tr = $(".ui-widget:visible").closestToOffset({left: cw-20, top: -20});
var bl = $(".ui-widget:visible").closestToOffset({left: 0+20, top: ch+20});
// those '20's are to to throw away from the others elements
var br = $(".ui-widget:visible:last");

$(".ui-widget").removeClass(function (index, css) {
    return (css.match(/\ui-corner-\S+/g) || []).join(' ');
});

tl.addClass("ui-corner-tl");
tr.addClass("ui-corner-tr");
bl.addClass("ui-corner-bl");
br.addClass("ui-corner-br");