JQuery CSS nth-child selector

Я столкнулся с очень странным поведением селектора nth-child.JQuery CSS nth-child selector

Когда я вызываю функцию BackColor1() мои визуальные выглядит как: enter image description here

Что является неправильным. И если я позвоню BackColor2() все выглядит нормально.

enter image description here

Может кто-то пожалуйста, объясните, где хитрость и то, что я сделал неправильно с BackColor1() функции?

Вот мой пример HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     //BackColor1(); 
     //BackColor2(); 
    }); 
    function BackColor1() { 
     $("li:nth-child(2n+1) > div").css({ "background": "#F2F2F2" }); 
    } 

    function BackColor2() { 
     $("li").each(function (key, val) {     
      if (key % 2 == 0) { 
       $(this).children("div").css({ "background": "#F2F2F2" }); 
      } 
     }); 
    } 
</script> 
</head> 
<body> 
<ul>    
    <li> 
     <div>Video Streaming</div> 
     <ul>        
      <li><div>VOD</div></li>        
      <li><div>Progressive Streaming</div></li>                   
     </ul>        
    </li>      
    <li><div>Middle Lesson Without Chapter</div></li>      
    <li> 
     <div>File Download</div>       
     <ul>        
      <li><div>Direct Download</div></li>        
     </ul>        
    </li>      
    <li><div>Pre Last Lesson Without Chapter</div></li>      
    <li><div>Last Lesson Without Chapter</div></li> 
</ul> 
</body> 
</html>

источник

2013-06-27 Michael Samteladze

Если бы я догадываюсь, 'ли: п-й ребенок (2n + 2)' выбирает каждый уль отдельно, затем применяет css ко всем нечетным элементам в этой ul. Я не знаю, как добиться желаемого поведения. – Sumurai8

Это просто потому, что nth-child подсчитывается для каждого ul с самого начала.

<ul>    
    <li> <!-- first child of parent ul--> 
     <div>Video Streaming</div> 
     <ul>        
      <li><div>VOD</div></li> <!-- first child of nested ul--> 
     </ul>        
    </li>      
    <li><div>Middle Lesson Without Chapter</div></li> <!-- second child of parent ul--> 
    ...

источник

2013-06-27 08:03:31 Alp

К сожалению, я не знал, что он начинает вычисления от каждого родителя. После того как я прочитал описание w3schools, я подумал, что он выбирает все элементы li и принимает только нечетные. –

Это происходит потому, что элемент VOD является первым потомком своего родителя, поэтому получает цвет. Он не принимает во внимание другие элементы вокруг него.

Однако, ваш селектор jQuery рассматривает ВСЕ элементы списка на странице как одну большую группу, поэтому он чередует цвета независимо от того, где они находятся в DOM.

источник

2013-06-27 08:02:11

BackColor использует селектор nth-child ... Каждый дочерний номер элемента соответствует его родительскому элементу, поэтому, когда вы вставляете списки, подобные тому, что вы склонны сталкиваться с более чем одним элементом LI, который должен рассматриваться как nth-child = 1 и так далее.

источник

2013-06-27 08:03:21 Salketer

Вы должны использовать even selector

код:

function BackColor1() { 
    $("li:even > div").css({ 
     "background": "#F2F2F2" 
    }); 
}

demo

источник

2013-06-27 08:19:56 skafandri

Отлично это решает мою проблему очень элегантно. –

JQuery CSS nth-child selector

ответ

Смежные вопросы