आधुनिकizr का उपयोग कर nth-child के लिए परीक्षण कैसे करें?

Question

मैं modernizr उपयोग करने के लिए :nth-child ब्राउज़र समर्थन के लिए परीक्षण करने के लिए कोशिश कर रहा हूँ, लेकिन मैं इसे कैसे करना यकीन नहीं है, मैं इस एक http://jsfiddle.net/laustdeleuran/3rEVe/ जो :last-child के लिए परीक्षण में पाया गया लेकिन मैं नहीं जानता कि कैसे :nth-child (मैं पता लगाने के लिए इसे बदलने के लिए ऐसा करने के बारे में भी सोच रहा था क्योंकि मुझे लगता है कि :last-child का समर्थन नहीं करने वाले ब्राउज़र :nth-child का समर्थन नहीं करते हैं, लेकिन मुझे यकीन नहीं है)

क्या आप लोग मेरी मदद कर सकते हैं? अग्रिम में धन्यवाद!

Answer 1

मैं सिर्फ पता लगाने के लिए एक समारोह लिखा है: के लिए n वें-बाल सहायता आप

function isNthChildSupported(){ 
var result = false, 
    test = document.createElement('ul'), 
    style = document.createElement('style'); 
test.setAttribute('id', 'nth-child-test'); 
style.setAttribute('type', 'text/css'); 
style.setAttribute('rel', 'stylesheet'); 
style.setAttribute('id', 'nth-child-test-style'); 
style.innerHTML = "#nth-child-test li:nth-child(even){height:10px;}"; 
for(var i=0; i<3; i++){ 
    test.appendChild(document.createElement('li')); 
} 
document.body.appendChild(test); 
document.head.appendChild(style); 
    if(document.getElementById('nth-child-test').getElementsByTagName('li')[1].offsetHeight == 10) {result = true;} 
document.body.removeChild(document.getElementById('nth-child-test')); 
document.head.removeChild(document.getElementById('nth-child-test-style')); 
    return result; 
} 

उपयोग:

isNthChildSupported() ? console.log('yes nth child is supported') : console.log('no nth child is NOT supported'); 

आप इस क्रिया में यहाँ http://jsbin.com/epuxus/15

भी काम करता है देख सकते हैं jQuery :nth-child और CSS :nth-child के बीच एक अंतर है।

jQuery :nth-child किसी भी ब्राउज़र jQuery का समर्थन करता है लेकिन सीएसएस में समर्थित है IE9, क्रोम, सफारी और Firefox

Answer 2

मुझे याद है कि चयनकर्ताओं समर्थन के लिए परीक्षण एक Modernizr चयनकर्ताओं प्लगइन था, लेकिन मैं नहीं कर सकता में :nth-childis supported इसे अभी ढूंढें। आप इसे देख सकते हैं: http://javascript.nwbox.com/CSSSupport/ जो समान है।

Answer 3

तुम भी Selectivizr का उपयोग असमर्थित ब्राउज़र

Answer 4

मोहसिन को CSS3 चयनकर्ता समर्थन जोड़ने के लिए, अपने निर्णय के लिए धन्यवाद कर सकते हैं। कोई तो jQuery की जरूरत है:

function test(){ 

    var result = false, 
     test = $('<ul id="nth-child-test"><li/><li/><li/></ul>').appendTo($('body')), 
     style = $('<style type="text/css">#nth-child-test li:nth-child(even){height:10px;}</style>').appendTo($('head')); 

    if(test.children('li').eq(1).height() == 10) 
    result = true; 

    test.remove(); 
    style.remove(); 

    return result; 

};