css - nth-child 在其他元素中选择 div 有什么选择？

Question

我的 <nav> 中有这样一个 HTML 结构.我假设 nth-child是要走的路:

   <nav>
    <article class="menu-items">
    <div class="row">
      <ul class="col-6 column">
        <!-- primary nav group one -->
        <li class="primary-nav">Home</li>
        <li class="primary-nav">News</li>
      </ul>
      <ul class="col-6 column right align-right">
        <!-- primary nav group two -->
        <li class="primary-nav">About</li>
        <li class="primary-nav">Contact</li>
      </ul>
    </div>
    <div class="row">
      <!-- primary nav group three -->
      <h1 class="primary-nav">Connect Online</h1>
      <ul class="col-6 column submenu-items">
        <li class="primary-nav"><a href="/">Twitter</a></li>
        <li class="primary-nav"><a href="/">Instagram</a></li>
      </ul>
      <ul class="col-6 column right submenu-items align-right">
        <!-- primary nav group four -->
        <li class="primary-nav"><a href="/">Facebook</a></li>
        <li class="primary-nav"><a href="/">Sq</a></li>
      </ul>
    </div>
  </article>
 </nav>

还有一些 CSS 在延迟后触发转换

.primary-nav:nth-child(n) {
    transition-delay: 400ms;
}
.primary-nav:nth-child(2n) {
    transition-delay: 400ms;
}
.primary-nav:nth-child(3n) {
    transition-delay: 700ms;
}
.primary-nav:nth-child(4n) {
    transition-delay: 700ms;
}
.primary-nav:nth-child(5n) {
    transition-delay: 900ms;
}
/* and so on */

MDN: The :nth-child() CSS pseudo-class matches one or more elements based on their position among a group of siblings

我不能使用 nth-child这里是因为primary-nav属于不同的群体。当到达第一组的末尾时，它将重新开始。说得通。 (odd)或 (even)在这里也没有多大用处。

我如何定位每个 .primary-nav div在这里？没有JS可以吗？

Answer 1

我不确定它是否适合您，但我认为您可以使用 Jquery 做到这一点。

var navDivs = $(".your-class-name").find(".primary-nav"); //Gives the list of divs who have the class .primary-nav.

或者，你可以给你的 div 一个 id 并通过 ID 搜索

 var navDivs = $("#your-parent-div-id").find(".primary-nav"); //Gives the list of divs who have the class .primary-nav.

最后，通过一个 for 循环，您可以通过 JQuery 设置元素的任何属性:

 for (var i = 0; i < navDivs.length; i++) {
  var div = navDivs[i];
  $(div).css("your-css-property", "your-css-value");
}