jquery - Determine wrap location in floated elements -


मान लें कि मेरे पास एक कंटेनर & lt; div & gt के अंदर छह & lt; div & gt; तत्व हैं ; । इन छह डिवाओं में से प्रत्येक एक वर्ग है और सीएसएस शैली float: left लागू है। डिफ़ॉल्ट रूप से, जब वे कंटेनर & lt; div & gt; के किनारे पर पहुंच जाएंगे तो वे लपेटेंगे

अब, मेरा सवाल है, जावास्क्रिप्ट का उपयोग करना, क्या यह निर्धारित करना संभव है कि कौन सा तत्व रैप है?

यदि वे इस पृष्ठ पर प्रदर्शित करते हैं:

  ___ ___ | 1 | | 2 | ----- ----- ___ ___ | 3 | | 4 | ----- -----   

मैं यह निर्धारित करने की कोशिश कर रहा हूं कि रैप दूसरे और तीसरे तत्व के बीच होता है। यदि आप सोच रहे हैं कि मैंने अपना दिमाग खो दिया है, तो इसका कारण यह है कि इनमें से एक बॉक्स पर क्लिक किया गया है, तो मैं कुछ फैंसी shmansy jQuery के साथ पंक्तियों के बीच एक जानकारी क्षेत्र ड्रॉप करना चाहता हूं। / P>

  ___ ___ | * | | ! | ----- ----- | Someinfo | ___ ___ | * | | * | ----- -----   

ब्रेक तब होता है, यह निर्धारित करने पर कोई विचार?

पीएस कारण मैं फ्लोटिंग कर रहा हूँ और इसे ऑटो लपेटने के लिए इसे उत्तरदायी बनाना है। अभी अगर मैं ब्राउज़र का आकार बदलता हूं, तो उसके अनुसार बक्से को लपेटता है। मैं हार्ड कोड कॉलम की चौड़ाई नहीं चाहता।

[संपादित करें] विस्फोट गोलियों द्वारा दिए गए उत्तर के लिए धन्यवाद, मैं एक समाधान के साथ आया था।

  // पहली तत्व के ऑफसेट var first = $ ("। उपकरण: पहले")। ऑफसेट ()। Left; Var ऑफ़सेट = 0; Var गणना = 0; $ ("। बॉक्स")। प्रत्येक (फ़ंक्शन () {// ऑफसेट ऑफसेट = $ (यह)। ओफ़सेट ()। बाएं; // यदि पहले बॉक्स नहीं है और ऑफ़सेट पहले बॉक्स ऑफ़सेट के बराबर है (गणना & gt; 0 और amp; ऑफसेट == पहले) {// दिखाएँ जहां विराम console.log है ("तत्व पर ब्रेक:" + गिनती);} / / अगला बॉक्स गिनती ++;});   

इस कंसोल में निम्न आउटपुट:

  तत्व पर ब्रेक: 7 तत्वों पर टूटता है: 14 तत्वों पर टूटता है: 21 तत्वों पर टूटता है: 28 < / कोड>  

जब मेरे पास 30 बक्से थे, जो 7 बक्से चौड़े और 5 पंक्तियों (अंतिम पंक्ति केवल 2 बक्से) होने का अंत था

बस बॉक्स की चौड़ाई से कंटेनर की चौड़ाई को विभाजित करें ..
( यह मानते हुए चौराहे समान चौड़ाई के हैं .. )

यह प्रत्येक पंक्ति के अंतिम तत्व का चयन करेगा

  var wrapper = $ ('। Wrapper'), बक्से = आवरण। बच्चे (), boxSize = boxes.first () .outerWidth (सही); $ (खिड़की)। Reset (फ़ंक्शन () {var w = wrapper.width (), ब्रेकैट = मठ। फ्लोर (w / boxSize); // यह गणना करता है कि पंक्ति में कितने आइटम फिट हैं last_per_row = boxes.filter (': Nth-child ('+ breakat +' n) ') // प्रत्येक पंक्ति के आखिरी तत्व को लक्षित करें / / आप last_per_row तत्वों के साथ क्या करना चाहते हैं ..});   

डेमो पर

Comments