Подтвердить что ты не робот

CSS flex: последний и первый элемент в селекторе строк

У меня возникла проблема с выбором последнего элемента первой строки и первого элемента последней строки контейнера flex.

Мой контейнер flex flex-wrap: wrap;, и все мои элементы flex: auto;, и у них разные размеры, и с помощью flex auto я позволяю элементам соответствовать как оправдание на моем контейнере, а мои угловые элементы имеют соответствующий округленный угол.

Но проблема в том, что я скрываю и показываю элементы с событиями (например, при щелчке), и мне нужно, чтобы элементы углов округлялись каждый раз, когда они меняются, если у него есть контейнер сетки, я мог бы выбрать nth-child, потому что он никогда не меняет количество столбцов. Но в flex есть разное количество элементов в строке.

Я придумал решение JQuery (ссылка ниже), но я думаю, что он должен быть оглушен и большой, может иметь более умный способ или простой селектор, который я не могу использовать.

Пожалуйста, помогите мне придумать лучший код, поэтому не только я не могу его использовать.

http://jsfiddle.net/aj1vk0rv/

изменить: Просто немного улучшил код http://jsfiddle.net/aj1vk0rv/1/

4b9b3361

Ответ 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 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");