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

时间:2016-09-19 18:41:58

标签: javascript jquery

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

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

2 个答案:

答案 0 :(得分:1)

您可以使用:gt()

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

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

答案 1 :(得分:0)

您可以轻松地执行此操作,无需 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;