Flessione CSS: selettore ultimo e primo elemento di riga

Question

Ho riscontrato un problema nel tentativo di selezionare l'ultimo elemento della prima riga e il primo elemento dell'ultima riga di un contenitore flessibile.

mio contenitore Flex è flex-wrap: wrap; e tutti i miei elementi sono flex: auto; e hanno dimensioni diverse, e da Auto Flex I lasciare che gli elementi si adattano come giustificare il mio contenitore, ed i miei elementi angolari hanno il loro rispettivo spigolo arrotondato.

Ma, il problema è che io sto nascondendo e mostrando gli elementi con eventi (come il clic), e ho bisogno di impostare gli angoli arrotondati elementi ogni volta che cambia, se ha un contenitore di tabelle ho potuto scegliere da nth-child perché non modifica mai il numero di colonne. Ma nel flex hanno un numero diverso di elementi per riga.

Mi è venuta in mente una soluzione Jquery (link down mellow), ma penso che sia per ogle e big, potrebbe avere un modo più intelligente o un semplice selettore che non posso usare.

Per favore aiutatemi a trovare un codice migliore, quindi non solo me ne posso fare un buon uso.

http://jsfiddle.net/aj1vk0rv/

edit: Basta migliorato un po 'il codice http://jsfiddle.net/aj1vk0rv/1/

Answer 1

non vedo alcuna soluzione semplice, ma in questo modo è un po' pulito:

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");