Javascript 如何选择div的每个子项并获取第n个编号

Javascript 如何选择div的每个子项并获取第n个编号,javascript,jquery,html,css,pug,Javascript,Jquery,Html,Css,Pug,所以我有一个很愚蠢的问题。我正在为官方游戏网站做设计。他告诉我会有很多截图。我做了一个设计,一切都很酷,但是确实有很多,所以我想通过jQuery在移动版(px

所以我有一个很愚蠢的问题。我正在为官方游戏网站做设计。他告诉我会有很多截图。我做了一个设计,一切都很酷,但是确实有很多,所以我想通过jQuery在移动版(px<640px)中关闭它们,然后创建按钮来显示它们。我知道互联网上有很多指令,但它们根本没有与我的标记进行比较,实际上我希望它的结构与我所想的完全相同。 所以我想要的是找到图像块中每个子块的第n个子编号,以及第n个子编号大于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>

⇕ 扩展

⇕ 扩展

⇕ 扩展

⇕ 扩展

⇕ 扩展

⇕ 扩展


使用
gt
选择器

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

选择匹配集中索引大于索引的所有元素


使用
gt
选择器

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

选择匹配集中索引大于索引的所有元素


我建议使用css3媒体查询方式。它使您的页面具有响应性,例如,您有一个名为“image sq”的类,您可以在样式标记或单独的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;
}

它使您的页面可以灵活地从一个屏幕切换到另一个屏幕

我建议您使用css3媒体查询方式。它使您的页面具有响应性,例如,您有一个名为“image sq”的类,您可以在样式标记或单独的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;
}

它使您的页面可灵活切换到其他屏幕

gt选择器?他在干什么?选择第三个之后的每个图像?
gt
=“选择索引大于匹配集中索引的所有元素。”-我不认为OP要求的不是这个?编辑:看来它毕竟是哈哈+1用于字里行间的阅读;-)不,它是零索引的。这意味着每一张照片fourth@RichardHamilton等等,我无法打开它们“$”('.button--show more')。单击(函数(){console.log('Hi!')$('images-block.image sq:gt(3)'))。css('dispay','inline block');});'即使显示命令不工作gt选择器也不工作?他在干什么?选择第三个之后的每个图像?
gt
=“选择索引大于匹配集中索引的所有元素。”-我不认为OP要求的不是这个?编辑:看来它毕竟是哈哈+1用于字里行间的阅读;-)不,它是零索引的。这意味着每一张照片fourth@RichardHamilton等等,我无法打开它们“$”('.button--show more')。单击(函数(){console.log('Hi!')$('images-block.image sq:gt(3)'))。css('dispay','inline block');});'即使show命令不起作用也不起作用,但是我想用JS-bc来做,我想在点击后打开它们,然后don;I don’我不想通过jQuery更改样式,这意味着实现这一点的唯一方法是复选框技巧,但这需要很多时间,而且可能会出现很多bug,你知道得更清楚。好运气,但我想用JS bc来做,我想在点击后打开它们,然后don;I don’我不想通过jQuery更改样式,这意味着实现这一点的唯一方法是复选框技巧,但这需要很多时间,而且可能会出现很多bug,你知道得更清楚。祝你好运