: nth-child для вложенных элементов

У меня есть следующий html-код. Я хочу выбрать нечетные или даже .menu-элементы ul в этом коде, которые они помещаются в бесконечно вложенном формате. пожалуйста, помогите мне ...: nth-child для вложенных элементов

<nav class='amazing-menu '> 
    <ul id='menu_container'> 
    <li class="parent"> 
     <a href="#" class="link">First</a> 
     <div class="sub-menu"> 
     <ul class="menu-item"> 
      <!-- I want to => background-color: red; --> 
      <li> 
      <a href="" class="link">sub-item1</a> 
      </li> 
      <li class="parent"> 
      <a href="" class="link">sub-item1</a> 
      <div class="sub-menu"> 
       <ul class="menu-item"> 
       <!-- I want to => background-color: blue; --> 
       <li><a href="link">sub-sub-item1</a> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       <li class="parent"><a href="link">sub-sub-item4</a> 
        <div class="sub-menu"> 
        <ul class="menu-item"> 
         <!-- I want to => background-color: green; AND so on ... --> 
         <li><a href="link">sub-sub-sub-item1</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item2</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item3</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item4</a> 
         </li> 
        </ul> 
        </div> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <a href="" class="link">sub-item2</a> 
      </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav>

источник

2016-12-14 jamshid

что именно вы ищете в ? – Geeky

, если вы хотите выбрать элементы li в menuitem, просто используйте как .menu-item li: nth-child (нечетный) { цвет: красный; } .menu-item li: nth-child (even) { цвет: зеленый; } – Geeky

Как сказал @Geeky, неясно, что вы просите. Вы запрашиваете альтернативу для четного или нечетного, но в разметке вы указываете 3 цвета. Не должно быть 2 цвета? – vals

Здесь вы идете, должно быть хорошо, из того, что я понял, чего вы пытаетесь достичь. Если работа должна быть сделана на внутренней стороне li item-menu, используйте подход из комментариев! Надеюсь, он соответствовал вашей цели.

</style> 
</head> 
<body> 

<nav class='amazing-menu '> 
    <ul id='menu_container'> 
    <li class="parent"> 
     <a href="#" class="link">First</a> 
     <div class="sub-menu"> 
     <ul class="menu-item"> 
      <!-- I want to => background-color: red; --> 
      <li> 
      <a href="" class="link">sub-item1</a> 
      </li> 
      <li class="parent"> 
      <a href="" class="link">sub-item1</a> 
      <div class="sub-menu"> 
       <ul class="menu-item"> 
       <!-- I want to => background-color: blue; --> 
       <li><a href="link">sub-sub-item1</a> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       <li class="parent"><a href="link">sub-sub-item4</a> 
        <div class="sub-menu"> 
        <ul class="menu-item"> 
         <!-- I want to => background-color: green; AND so on ... --> 
         <li><a href="link">sub-sub-sub-item1</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item2</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item3</a> 
         </li> 
         <li><a href="link">sub-sub-sub-item4</a> 
         </li> 
        </ul> 
        </div> 
       </li> 
       <li><a href="link">sub-sub-item2</a> 
       </li> 
       <li><a href="link">sub-sub-item3</a> 
       </li> 
       </ul> 
      </div> 
      </li> 
      <li> 
      <a href="" class="link">sub-item2</a> 
      </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav> 

<button onclick="myFunction()">Try it</button> 


<script> 
function myFunction() { 
    var x = document.getElementsByClassName("sub-menu"); 
    for(var i = 0; i<x.length; i++) 
    { 
     if(i%2==0) 
     { 
      document.getElementsByClassName("menu-item")[i].style.backgroundColor = "red"; 
     } 
     else 
     { 
      document.getElementsByClassName("menu-item")[i].style.backgroundColor = "blue"; 
     } 
    } 
} 
</script> 

</body> 
</html>

P.S. Я разместил здесь фотографию, чтобы узнать, соответствует ли она вашим требованиям! https://s27.postimg.org/ta75cv36r/image.png

источник

2016-12-14 23:37:14

где p-тэг в коде OPs? Кроме того, это будет работать только тогда, когда элементы имеют один и тот же родитель. OP хотел иметь нечетное даже во вложенной разметке. – Sreekanth

очень хорошо, мой друг, спасибо. это очень мило – jamshid

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

Вы можете установить класс для каждого, т.е. ul-red и так далее ... или сделать это с помощью сценария, как в примере ниже

var bkgcolors = ['ul-red','ul-blue','ul-green'] 
 
window.addEventListener('load', function() { 
 
    var uls = document.querySelectorAll('.amazing-menu .menu-item'); 
 
    for (var i = 0; i < uls.length; i++) { 
 
    uls[i].classList.add(bkgcolors[i]) 
 
    } 
 
})

.ul-red { 
 
    background: red; 
 
} 
 
.ul-blue { 
 
    background: blue; 
 
} 
 
.ul-green { 
 
    background: green; 
 
}

<nav class='amazing-menu '> 
 
    <ul id='menu_container'> 
 
    <li class="parent"> 
 
     <a href="#" class="link">First</a> 
 
     <div class="sub-menu"> 
 
     <ul class="menu-item"> 
 
      <!-- I want to => background-color: red; --> 
 
      <li> 
 
      <a href="" class="link">sub-item1</a> 
 
      </li> 
 
      <li class="parent"> 
 
      <a href="" class="link">sub-item1</a> 
 
      <div class="sub-menu"> 
 
       <ul class="menu-item"> 
 
       <!-- I want to => background-color: blue; --> 
 
       <li><a href="link">sub-sub-item1</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item2</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item3</a> 
 
       </li> 
 
       <li class="parent"><a href="link">sub-sub-item4</a> 
 
        <div class="sub-menu"> 
 
        <ul class="menu-item"> 
 
         <!-- I want to => background-color: green; AND so on ... --> 
 
         <li><a href="link">sub-sub-sub-item1</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item2</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item3</a> 
 
         </li> 
 
         <li><a href="link">sub-sub-sub-item4</a> 
 
         </li> 
 
        </ul> 
 
        </div> 
 
       </li> 
 
       <li><a href="link">sub-sub-item2</a> 
 
       </li> 
 
       <li><a href="link">sub-sub-item3</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <a href="" class="link">sub-item2</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</nav>

источник

2016-12-15 05:58:40 LGSon

: nth-child для вложенных элементов

ответ

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