फ़ायरफ़ॉक्स, क्वेरी चयनकर्ता और दृश्यमान छद्म चयनकर्ता

Question

क्या दृश्यता का पता लगाने के लिए फ़ायरफ़ॉक्स की क्वेरी चयनकर्ता() या querySelectorAll() फ़ंक्शंस के साथ छद्म चयनकर्ता का उपयोग करने के लिए वैसे भी है? विशेष रूप से मैं इस तरह कुछ करने के लिए सक्षम होना चाहते हैं:

elem.querySelector('#list .list-item:visible'); 
elem.querySelector('#section .sub-section:visible .title'); 

ब्राउज़र विसंगतियों या अन्य कार्यान्वयन, बस फ़ायरफ़ॉक्स बारे में चिंता करने की कोई ज़रूरत नहीं। धन्यवाद!

संपादित करें: दर्शनीय प्रदर्शन नहीं किया जा रहा कोई भी और दृश्यताछिपा हुआ नहीं किया जा रहा द्वारा परिभाषित किया गया है।

Answer 1

नहीं, ऐसा नहीं है। The CSS specification:visible (या संबंधित) चयनकर्ता को परिभाषित नहीं करता है, और AFAIK फ़ायरफ़ॉक्स गैर-मानक छद्म चयनकर्ताओं को लागू नहीं करता है।

आप अपने आप को इस लागू करने के लिए चाहते हैं, तो ध्यान दें कि कैसे jQuery अपने :visible चयनकर्ता लागू करता है:

jQuery 1.3.1 (और पुराने) एक तत्व दिखाई दे रही थी, तो इसकी सीएसएस "प्रदर्शन" नहीं था "में कोई नहीं ", इसकी सीएसएस" दृश्यता "" छिपी हुई "नहीं थी, और इसका प्रकार (यदि यह इनपुट था)" छुपा "नहीं था। jQuery में 1.3.2 एक तत्व दिखाई दे रहा है अगर इसकी ब्राउज़र-सूचना offsetWidth या offsetHeight से अधिक 0.

स्रोत है: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

Answer 2

के बाद से वहाँ का कोई देशी implimentation है: दिखाई छद्म चयनकर्ता मैंने तय कर लिया मेरे तत्वों को छिपाने और दिखाने के लिए सीएसएस कक्षाओं का उपयोग करने के लिए, इस प्रकार दृश्यता के बजाए बस कक्षा के नाम की जांच करने की इजाजत दी गई है।

elem.querySelector('#list .list-item:not(.hidden)'); 

अब 2016 में हम भी छिपा एचटीएमएल 5 विशेषता का उपयोग कर सकते हैं, तो यह चयनकर्ता भी काम करेगा:: यहाँ अब की तरह मेरे चयनकर्ता दिखता है

elem.querySelector('#list .list-item:not([hidden])'); 

Answer 3

जांच की जा रही है, तो तत्व दिखाई देता है, पर का समर्थन करता है सभी प्रमुख ब्राउज़रों:

jQuery:

$('.list-item').is(':visible'); 

वेनिला जे एस:

function isVisible(elem) {return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0; } 

Answer 4

सादे जावास्क्रिप्ट का प्रयोग करके आप jQuery व्यवहार को आसानी से अनुकरण एक सरणी में अपने querySelector परिणाम मोड़, और यह छानने सकता है:

Array.prototype.slice.call(document.querySelectorAll('your selector')) 

कि अपने चयनकर्ता के परिणामों के साथ एक सादे सरणी बनाता है,

.filter(function (item,index) { return item.style.display!="none" }); 

या यहाँ तक कि jQuery की स्थिति के बाकी (item.style.visibility != "hidden" && item.style.opacity > 0 && ...): आप के रूप में फ़िल्टर कर सकते हैं कि।

एक एक लाइनर के रूप में:

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" });