选择每个父元素中的第三个元素

select the third element in every parent element

本文关键字：元素 三个 选择      更新时间：2023-09-26

我需要帮助。如何从第三个<p>元素开始，在页面上的每个<div>(用于添加某些类)中选择<p>元素?

我试着选择像- $('div p').slice(1).addClass('hidden');但结果只有一个<p>元素留在页面上

可以使用:gt()

$('div p:gt(1)').addClass('hidden');

:gt()的索引是从零开始的，因此上面将选择第三个或更高的索引

无需 javascript....

就可以轻松实现

.thirds p:nth-child(3n) { background: red; color: #fff; }
.threeplus p:nth-child(n+3) { background: green; color: #fff; }
div { 
  margin: 20px 0; 
  background: #eee; 
  border: 1px solid #ddd; 
  padding: 20px; 
  width: 100px;
  display: inline-block;}
p { margin: 0 0 2px; padding:0; }
<div class="thirds">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="threeplus">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>

要隐藏任何div中的第3段及以下段落，只需概括CSS:

div p:nth-child(n+3) {  display: none; }
div { 
  margin: 20px 0; 
  background: #eee; 
  border: 1px solid #ddd; 
  padding: 20px; 
  width: 100px;
  display: inline-block;}
p { margin: 0 0 2px; padding:0; }
<div class="thirds">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="threeplus">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="thirds">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="threeplus">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="thirds">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="anotherClass">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="anotherRandomClass" id="andanID">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>
<div class="moreClass">
  <p>One</p>
  <p>Two</p>
  <p>three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
  </div>

相关文章：