Как проверить на nth ребенка, используя Modernizr? - PullRequest
Новая
       14

Как проверить на nth ребенка, используя Modernizr?

9 голосов
/ 03 октября 2011

Я пытаюсь использовать modernizr для проверки поддержки :nth-child браузера, но я не уверен, как это сделать, я нашел этот http://jsfiddle.net/laustdeleuran/3rEVe/, который проверяет :last-child, но я не знаюзнаю, как изменить его, чтобы обнаружить :nth-child (я тоже думал об этом, поскольку считаю, что браузеры, которые не поддерживают :last-child, также не поддерживают :nth-child, но я не уверен)

Можете ли вы, ребята, помочь мне?Заранее спасибо!

Ответы [ 4 ]

13 голосов
/ 03 октября 2011

Я только что написал функцию для определения поддержки: nth-child 

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, но поддерживается CSS :nth-child в IE9, Chrome, Safari и Firefox

3 голосов
/ 03 октября 2011

Я помню, что был плагин Modernizr для селекторов, который тестировался на поддержку селекторов, но сейчас я не могу его найти. Вы можете взглянуть на это: http://javascript.nwbox.com/CSSSupport/, который похож.

2 голосов
/ 19 июля 2012

Вы также можете использовать Selectivizr для добавления поддержки селектора CSS3 в неподдерживаемые браузеры

1 голос
/ 21 февраля 2014

Мохсен, спасибо за ваше решение. Если кому-то нужен 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;

};
...