Rimuovi il margine destro su ogni quarto elemento VISIBILE usando jQuery?

Question

Ho utilizzato con successo il selettore jQuery :nth-child() per rimuovere il margine destro da ogni quarto elemento in un lungo elenco di div. Ecco come si presenta:

$(".myDivClass:nth-child(4n+4)").css("margin-right", 0); 

Ma la pagina è aperto anche per interazione con l'utente (tramite jQuery) e una delle cose che l'utente può fare è nascondere/mostrare elementi. Quando un elemento è nascosto, il suo stile è impostato su "display: none". Gli elementi sono galleggiare per cui se si rimuove un elemento nel mezzo di una riga, un elemento dalla riga sotto si saltare, in questo modo:

Il mio primo pensiero è stato quello di rifare il tutto dal primo aggiungere un margine a tutti gli elementi e quindi rimuoverlo da ogni quarto elemento visibile; qualcosa di simile:

$(".myDivClass").css("margin-right","20px"); 
$(".myDivClass:visible:nth-child(4n+4").css("margin-right", 0); 

Ma la seconda fila non fa nulla e non credo che si può impilare pseudo selettori come nell'esempio sopra

C'è una soluzione a questo problema (?)? C'è un modo migliore per farlo?

Grazie in anticipo!

/Thomas

Answer 1

So che questo non è direttamente una risposta alla tua domanda, ma quando faccio cose simili con galleggianti un gruppo di elementi di blocco con una certa distanza tra di loro, io di solito non mancherà di tenere il margine su ognuna di esse, ma rendere il loro contenitore genitore abbia (in questo caso) un margine negativo-destro uguale alla spaziatura tra gli elementi.

In questo modo il genitore si adatterà ancora dove lo vuoi, ma i bambini fluttuano come dovrebbero nello spazio di cui hanno bisogno.

Answer 2

Hmm, ok il selettore nth-child() sembra non funzionare come dovrebbe. Sembra ignorare gli elementi nascosti. Quindi potrebbe essere necessario .remove() o .detach() gli elementi chiusi. Ecco un demo, ma modifica il bordo anziché il margine per renderlo più visibile a scopo dimostrativo.

$('.box:visible:nth-child(5n+5)').addClass('noSide'); 

$('.close').click(function() { 
    // needs to be removed or detached because the nth child 
    // appears to ignore hidden elements 
    $(this).parent().detach(); 
    $('.noSide').removeClass('noSide'); 
    $('.box:visible:nth-child(5n+5)').addClass('noSide'); 
});