隐藏除前两个（jQuery）之外的嵌套html元素？

Question

我有这样的结构：

<ol class="feeds">
  <li class="feed"></li>
  <strong>
    <li class="feed"></li>
    <strong>
      <li class="feed"></li>
      <strong>
        <!-- and so on -->
      </strong>
    </strong>
  </strong>
</ol>

如何隐藏除第一个和第二个之外的所有.feed元素？

Answer 1

试试这个： -

$(".feed:gt(1)").hide(); //since JavaScript arrays use 0-based indexing so we have to use '1' in index.

详细了解:gt() here.

Answer 2

您也可以使用以下内容：

 $('.feed:not(:nth-child(1)),.feed:not(:nth-child(2))').hide();

Answer 3

使用JQuery：

$(".feed").each(function(i) {
    if (i == 1 || i == 2) return;
    $(this).hide();
});

Answer 4

像这样使用$(".feed:gt(1)").hide()：

$(".feed:gt(1)").hide()

<ol class="feeds">
  <li class="feed">f</li>
  <strong>
    <li class="feed">s</li>
    <strong>
      <li class="feed">t</li>
      <strong>
        <!-- and so on -->
      </strong>
    </strong>
  </strong>
</ol>

Answer 5

你最好使用CSS兼容的选择器$('.feed:nth-child(n+3)').hide()，其中n> = 0，计数器从1开始。

或许你可以摆脱JS，只使用CSS .feed:nth-child(n+3) { display: none; }