使用jQuery選擇器“ nth-of-type”時出現問題

Question

我有以下代碼用於家譜布局。 我正在嘗試使用“ nth-of-type”並以“ a”標簽為目標來獲取每個“ div.d3”中的人數。 結果是5、4、0、0、0、0、0、0而不是2、0、2、1、0、0、2、2。

 for (var j = 0; j < 8; j++) { // FOR EACH CHILD var num = $('.d3:nth-of-type(' + (j + 1) + ') a').size(); console.log(j + ' = ' + num); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='row d' style='grid-template-columns:repeat(1, auto);'> <div class='row d d3' id='c0' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(7)"> <div class="content f" id="d30">Leila Rose<br><b>JONES</b><br><span class="nee"><br>2009 - </span></div> </a> <a href="#" onclick="getBase(8)"> <div class="content m" id="d31">Oscar<br><b>JONES</b><br><span class="nee"><br>2012 - </span></div> </a> </div> </div> <div class='row d' style='grid-template-columns:repeat(1, auto);'> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> <div class='row d d3' id='c2' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(26)"> <div class="content f" id="d32">Natasha<br><b>SMITH</b><br><span class="nee"><br>2007 - </span></div> </a> <a href="#" onclick="getBase(27)"> <div class="content m" id="d33">Gabriel<br><b>SMITH</b><br><span class="nee"><br>1997 - </span></div> </a> </div> </div> <div class='row d' style='grid-template-columns:repeat(3, auto);'> <div class='row d d3' id='c3' style='grid-template-columns:repeat(1, auto);'> <a href="#" onclick="getBase(25)"> <div class="content f" id="d34">Karen<br><b>WILLIAMS</b><br><span class="nee"><br>2010 - </span></div> </a> </div> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> </div> <div class='row d' style='grid-template-columns:repeat(2, auto);'> <div class='row d d3' id='c6' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(33)"> <div class="content f" id="d35">Child1<br><b>WILSON</b><br><span class="nee"><br>2001 - </span></div> </a> <a href="#" onclick="getBase(34)"> <div class="content m" id="d36">Child2<br><b>WILSON</b><br><span class="nee"><br>2003 - </span></div> </a> </div> <div class='row d d3' id='c7' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(31)"> <div class="content f" id="d37">Penelopy "Penny"<br><b>TAYLOR</b><br><span class="nee"><br>2007 - </span></div> </a> <a href="#" onclick="getBase(32)"> <div class="content f" id="d38">Claire<br><b>TAYLOR</b><br><span class="nee"><br>2012 - </span></div> </a> </div> </div> 

Answer 1

您不想要nth-of-type的需求。

 var d3Items = $('.d3'); var i = 0; d3Items.each(function(){ var aCount = $(this).find('a').length; console.log(i + ' = ' + aCount); i++; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='row d' style='grid-template-columns:repeat(1, auto);'> <div class='row d d3' id='c0' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(7)"><div class="content f" id="d30">Leila Rose<br><b>JONES</b><br><span class="nee"><br>2009 - </span></div></a> <a href="#" onclick="getBase(8)"><div class="content m" id="d31">Oscar<br><b>JONES</b><br><span class="nee"><br>2012 - </span></div></a> </div> </div> <div class='row d' style='grid-template-columns:repeat(1, auto);'> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> <div class='row d d3' id='c2' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(26)"><div class="content f" id="d32">Natasha<br><b>SMITH</b><br><span class="nee"><br>2007 - </span></div></a> <a href="#" onclick="getBase(27)"><div class="content m" id="d33">Gabriel<br><b>SMITH</b><br><span class="nee"><br>1997 - </span></div></a> </div> </div> <div class='row d' style='grid-template-columns:repeat(3, auto);'> <div class='row d d3' id='c3' style='grid-template-columns:repeat(1, auto);'> <a href="#" onclick="getBase(25)"><div class="content f" id="d34">Karen<br><b>WILLIAMS</b><br><span class="nee"><br>2010 - </span></div></a> </div> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> <div class='row d d3' style='grid-template-columns:repeat(1, auto);'> <div></div> </div> </div> <div class='row d' style='grid-template-columns:repeat(2, auto);'> <div class='row d d3' id='c6' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(33)"><div class="content f" id="d35">Child1<br><b>WILSON</b><br><span class="nee"><br>2001 - </span></div></a> <a href="#" onclick="getBase(34)"><div class="content m" id="d36">Child2<br><b>WILSON</b><br><span class="nee"><br>2003 - </span></div></a> </div> <div class='row d d3' id='c7' style='grid-template-columns:repeat(2, auto);'> <a href="#" onclick="getBase(31)"><div class="content f" id="d37">Penelopy "Penny"<br><b>TAYLOR</b><br><span class="nee"><br>2007 - </span></div></a> <a href="#" onclick="getBase(32)"><div class="content f" id="d38">Claire<br><b>TAYLOR</b><br><span class="nee"><br>2012 - </span></div></a> </div> </div> 

Answer 2

我認為這是您想要的：

$('.d3').each(function(i) {
  console.log(i + ' = ', $(this).find('a').length);
});

https://codepen.io/rockysims/pen/oaJrGQ

問題是nth-of-type(n)在每個父div（“行” div）中選擇與“ .d3”匹配的第n個子div。 因此， nth-of-type(1)選擇＃c0（沒有id的div），＃c3和＃c6，然后獲取這些div中的所有a標簽（＃c0中的2，沒有id的div中的0，1來自＃c3，來自＃c6的2，總計5）。 這就是為什么您看到的第一個數字是5。