Question

我有一个列表，我想获得每个标题项后的第一个项目。我需要使用Nightwatch在一行中完成所有这一切，它没有在浏览器中使用jquery的所有弹性。我所拥有的是：

// This works
console.log('first item after first header is ');
console.log($('#ul-wrapper li.heading ~ li:first').text());

// This doesnt
console.log('first item after second header is ');
console.log($('#ul-wrapper li.heading:nth-child(2) ~ li:first').text());

所以基本上我需要将类选择器与nth-child（）或eq（）结合起来。 Html是：

<ul id="ul-wrapper">
   <li class="heading">

        Heading 1

   </li>
   <li>
      <label>
      <a>
        Item 1
      </a>
      </label>  
   </li>
   <li>
      <label>
      <a>
        Item 2
      </a>
      </label>  
   </li>
   <li class="heading">

        Heading 2

   </li>
   <li>
      <label>
      <a>
        Item 3
      </a>
      </label>  
   </li>
   <li>
      <label>
      <a>
        Item 4
      </a>
      </label>  
   </li>
</ul>

小提琴是here

Answer 1

我有一个列表，我希望得到每个标题项后的第一个项目

如果我理解正确，您可以使用Adjacent sibling selectors

＆＃13;

$('#ul-wrapper li.heading + li').css("background", "red");

＆＃13;

.heading {
  background-color: lightgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul-wrapper" style="">
  <li class="heading">

    Heading 1

  </li>
  <li>
    <label>
      <a>
      	Item 1
      </a>
    </label>
  </li>
  <li>
    <label>
      <a>
      	Item 2
      </a>
    </label>
  </li>
  <li class="heading">

    Heading 2

  </li>
  <li>
    <label>
      <a>
      	Item 3
      </a>
    </label>
  </li>
  <li>
    <label>
      <a>
      	Item 4
      </a>
    </label>
  </li>
</ul>

＆＃13;

Answer 2

:nth-child()伪类仅查看元素相对于父元素的索引。同样，:nth-of-type()只会根据类型查看元素的索引。 :nth-child() / :nth-of-type()伪类都不会考虑元素的class属性。

话虽如此，:eq()方法会根据 过滤后的集 选择一个元素（这正是你希望在这种情况下）。但是，值得指出的是:eq()的索引从零开始（与:nth-child() / :nth-of-type()不同）。在这种情况下，您需要使用eq(1)来访问第二个li元素：

Example Here

$('#ul-wrapper li.heading:eq(1) ~ li:first');

您也可以使用相邻的兄弟组合器+：

Example Here

$('#ul-wrapper li.heading:eq(1) + li');

将类选择器与nth-child（）或eq（）组合在一起

2 个答案: