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，＃c3中1个，＃c6中2个，共5个）。这就是为什么您看到的第一个数字是5的原因。

使用jQuery选择器“ nth-of-type”时出现问题

2 个答案: