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

Question

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

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

Answer 1

您可以使用:gt()

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

:gt()的索引是从零开始的，所以上面会选择第三个和更高的。

Answer 2

您可以轻松地执行此操作，无需 javascript ....

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

要隐藏任何 div中的第3段和后续段落，只需概括CSS：

＆＃13;

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;