如何 select div 中的每个 child 并得到第 n 个数

Question

所以我有一个非常愚蠢的问题。我正在为官方游戏做设计web-site。他告诉我会有很多截图。我做了一个设计，一切都很好，但确实有很多，所以我想通过 jQuery 在移动版（px < 640px）中关闭它们，然后创建按钮来显示它们.我知道 Internet 上有很多说明，但它们根本没有与我的标记进行比较，实际上我希望它具有与我想的完全相同的结构。所以我想要的是找到我的 images-block 的每个 child 的 nth-child 数量，以及每个 nth-child 数量超过 4 的块到 .hide()。感谢您的帮助！

      <div class="images-block">
        <div class="image-sq">
          <p>⇕ Expand</p>
        </div><div class="image-sq">
          <p>⇕ Expand</p>
        </div><div class="image-sq">
          <p>⇕ Expand</p>
        </div><div class="image-sq"> 
          <p>⇕ Expand</p>
        </div><div class="image-sq"> 
          <p>⇕ Expand</p>
        </div><div class="image-sq">
          <p>⇕ Expand </p>
        </div>
      </div>

Answer 1

使用 gt 选择器。

$(".images-block .image-sq:gt(3)").hide();

https://api.jquery.com/gt-selector/

Select all elements at an index greater than index within the matched set.

Answer 2

我建议使用css3媒体查询方式。它使您的页面具有响应性，例如您有一个名为 "image-sq" 的 class 您可以在样式标签或分隔的 css 文件中键入 css，如下所示：

@media (max-width: 640px)
.image-sq{
display: none\ or visibility:hidden
 }

但这不是您可以在范围内输入的全部内容，例如：

@media (min-width: 32.5em) and (max-width: 38.688em)
.image-sq{
width: 300px;
}

它使您的页面灵活地显示到另一个屏幕

如何 select div 中的每个 child 并得到第 n 个数

How to select each child of div and get nth number

html

javascript

css

jquery

pug