jQuery का उपयोग कर हर चौथे दृश्य तत्व पर सही मार्जिन निकालें?

Question

मैंने div की लंबी सूची में प्रत्येक चौथे तत्व से दाएं मार्जिन को हटाने के लिए jQuery :nth-child() चयनकर्ता का सफलतापूर्वक उपयोग किया है। यह इस तरह दिखता है:

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

लेकिन पेज भी उपयोगकर्ता बातचीत (jQuery के माध्यम से) और चीजें हैं जो उपयोगकर्ता कर सकते हैं छिपाने/शो तत्वों में से एक है के लिए खुला है। जब कोई तत्व छुपाया जाता है, तो इसकी शैली "डिस्प्ले: कोई नहीं" पर सेट होती है। तत्वों जारी कर रहे हैं, इसलिए यदि आप एक पंक्ति के बीच में एक तत्व निकालने के लिए, पंक्ति से एक तत्व के नीचे, इस तरह कूद जाएगा:

मेरी पहली सोचा पहले से पूरी बात फिर से करना था सभी तत्वों के लिए मार्जिन जोड़ना और फिर इसे प्रत्येक चौथे दृश्य तत्व से हटा दें; कुछ इस तरह:

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

लेकिन दूसरी पंक्ति कुछ नहीं करता है और मुझे नहीं लगता कि आप ऊपर

उदाहरण की तरह छद्म चयनकर्ताओं ढेर कर सकते हैं इस समस्या का एक समाधान है (?)? क्या ऐसा करने के लिए इससे अच्छा तरीका है?

अग्रिम धन्यवाद!

/थॉमस

Answer 1

मैं जानता हूँ कि यह सीधे अपने प्रश्न का उत्तर नहीं है, लेकिन जब मैं उन दोनों के बीच कुछ अंतर के साथ ब्लॉक तत्वों का एक समूह चल के साथ इसी तरह बातें करते हैं, मैं आमतौर पर उन सभी को पर मार्जिन रखना होगा लेकिन अपने माता-पिता के कंटेनर को (इस मामले में) नकारात्मक मार्जिन-दाएं तत्वों के बीच की दूरी के बराबर बनाते हैं।

इस तरह माता-पिता अभी भी फिट होंगे जहां आप इसे चाहते हैं लेकिन बच्चे बस तैर जाएंगे क्योंकि उन्हें आवश्यक स्थान के साथ चाहिए।

Answer 2

हम्म, ठीक nth-child() चयनकर्ता एकदम सही ढंग से कार्य नहीं भी कर रहा है। ऐसा लगता है कि छिपा तत्वों को नजरअंदाज कर दिया गया है। तो आपको बंद तत्वों को .remove() या .detach() करना पड़ सकता है। यहां एक demo है, लेकिन यह डेमो उद्देश्यों के लिए इसे और अधिक दृश्यमान बनाने के लिए मार्जिन के बजाय सीमा को संशोधित करता है।

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