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

У меня есть следующий код для макета генеалогического древа. Я пытаюсь получить количество людей в каждом «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>

Код jQuery находится в <script> внизу.

Rocky Sims 26.10.2018 03:12

Ваш код ответа работает нормально во фрагменте, но не показывает индекс или ноль для пустых блоков div без тегов 'a' в фактическом коде. Какие-либо предложения?

John Emerson 26.10.2018 05:29

Фрагмент SilentCoder (а также мой ответ) регистрирует 8 чисел, что равно количеству div с классом 'd3'. Это включает в себя первый div во второй строке, который является пустым div. Разве это не то, что вы хотели? Возможно, вам следует обновить свой ответ, чтобы мы могли воспроизвести проблему, которую вы наблюдаете.

Rocky Sims 26.10.2018 05:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
56
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам не нужен 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, но я не получаю нули.

John Emerson 26.10.2018 04:26

вы запускали мой фрагмент кода? там отображается 0. так это потому, что вы изменили структуру html. предоставленный код актуален?

SilentCoder 26.10.2018 05:03

Думаю, это то, что вам нужно:

$('.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 выше - это не дает мне нулей.

John Emerson 26.10.2018 04:30

Да, это так ... Я добавил ссылку на codepen.io к своему ответу, чтобы вы могли убедиться в этом сами. Нули там есть.

Rocky Sims 26.10.2018 04:43

Другие вопросы по теме