jQuery'yi kullanarak dördüncü VISIBLE öğesinin sağ kenar boşluğunu kaldırın.

Question

jQuery :nth-child() seçiciyi, div'un uzun bir listesindeki her dördüncü öğeden sağ kenar boşluğunu kaldırmak için başarıyla kullandım.

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

Ama sayfasında ayrıca kullanıcının (jQuery ile) etkileşim ve yapabileceği kullanıcı gizlemek/göstermek elemanları olduğunu şeylerden biri için açıktır: Bu gibi görünüyor. Bir öğe gizlendiğinde, stili "göster: yok" olarak ayarlanır. Bir satırın ortasında bir eleman çıkarmak eğer öyleyse elemanları yüzdüğü, satırdan bir unsur aşağıda bu gibi yukarı atlayacaktır:

ilk düşüncem ilk tarafından şeyi yeniden yapmak oldu Tüm öğelere bir kenar boşluğu ekleyerek ve sonra her dördüncü görünür öğesinden kaldır; Böyle bir şey:

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

Ama ikinci sıra hiçbir şey yapmaz ve bu soruna bir çözüm var mı sen

yukarıdaki örnekte olduğu gibi sözde seçiciler yığabilirsiniz sanmıyorum (?)? Bunu yapmanın daha iyi bir yolu var mı?

Şimdiden teşekkürler!

/Thomas

Answer 1

Bunun doğrudan soruya bir cevap değil biliyorum ama aralarında bazı aralıkla blok elemanlarının bir demet kayan benzer şeyler, ben genelde hepsinde marjı tutacak ama Ebeveyn konteynırlarının (bu durumda) unsurlar arasındaki boşluklara eşit bir negatif marj hakkı sağlamasını sağlayın.

Bu şekilde ebeveyn, istediğiniz yere sığmaya devam eder, ancak çocuklar ihtiyaç duydukları alandaki gibi yüzerler.

Answer 2

Hmm, tamam nth-child() seçici olması gerektiği gibi çalışmayabilir görünüyor. Gizli unsurları görmezden geliyor gibi görünüyor. Yani, .remove() veya .detach() kapalı elemanlara sahip olabilirsiniz. İşte bir demo, ancak demo amaçlı daha görünür hale getirmek için kenar boşluğu yerine kenarlığı değiştirir.

$('.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'); 
});