Проблемы с использованием селектора jQuery "nth-of-type"

Question

У меня есть следующий код для макета генеалогического дерева.Я пытаюсь определить количество людей в каждом div.d3, используя nth-of-type и нацеливая тег a.Результаты 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

Я думаю, это то, что вы хотите:

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

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

Проблема в том, что nth-of-type(n) выбирает n -й дочерний div, соответствующий '.d3' в каждом родительском div (div 'row'). Таким образом, nth-of-type(1) выбирает # c0, (div без идентификатора), # c3 и # c6, затем получает все теги a в этих divах (2 из # c0, 0 из div без id, 1 из # c3 и 2 из # c6 в общей сложности 5). Вот почему первое число, которое вы видите, - 5.

Answer 2

Вы не хотите 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>