У меня есть следующий код для макета генеалогического древа. Я пытаюсь получить количество людей в каждом «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.info(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>
Ваш код ответа работает нормально во фрагменте, но не показывает индекс или ноль для пустых блоков div без тегов 'a' в фактическом коде. Какие-либо предложения?
Фрагмент SilentCoder (а также мой ответ) регистрирует 8 чисел, что равно количеству div с классом 'd3'. Это включает в себя первый div во второй строке, который является пустым div. Разве это не то, что вы хотели? Возможно, вам следует обновить свой ответ, чтобы мы могли воспроизвести проблему, которую вы наблюдаете.
Вам не нужен nth-of-type
для ваших требований.
var d3Items = $('.d3');
var i = 0;
d3Items.each(function(){
var aCount = $(this).find('a').length;
console.info(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>
Спасибо, SilentCoder, но я не получаю нули.
вы запускали мой фрагмент кода? там отображается 0. так это потому, что вы изменили структуру html
. предоставленный код актуален?
Думаю, это то, что вам нужно:
$('.d3').each(function(i) {
console.info(i + ' = ', $(this).find('a').length);
});
https://codepen.io/rockysims/pen/oaJrGQ
Проблема в том, что nth-of-type(n)
выбирает дочерний div n
, соответствующий '.d3' в каждом родительском div (div'ах 'row'). Итак, nth-of-type(1)
выбирает # c0, (div без идентификатора), # c3 и # c6, а затем получает все теги a
в этих div (2 из # c0, 0 из div без идентификатора, 1 из # c3 и 2 из # c6 всего 5). Вот почему первое число, которое вы видите, - 5.
То же, что и SilentCoder выше - это не дает мне нулей.
Да, это так ... Я добавил ссылку на codepen.io к своему ответу, чтобы вы могли убедиться в этом сами. Нули там есть.
Код jQuery находится в
<script>
внизу.