JQuery HTML5 детали и резюме, проблемы с подсчетом детей - PullRequest
Новая
       29

JQuery HTML5 детали и резюме, проблемы с подсчетом детей

0 голосов
/ 07 ноября 2018

У меня проблемы с подсчетом детей в огромном «индексоподобном» файле, в котором используются теги деталей и сводки. Необходимо знать, сколько детей существует для конкретного итогового тега. Пример кода содержит лишь небольшую часть полного файла, но он показывает то, что я ищу: я вызываю функцию getAnswer со значением 'href', функция находит правильную запись, но оттуда я застрял: как узнать количество детей. Закомментированные строки показывают, что я пробовал разные вещи, но все они дают ответ 0, так что, думаю, я не могу использовать $ (это). Любая помощь приветствуется !! 

getAnswer('2013'); // should be 4
getAnswer('2013_spring'); // should be 0
getAnswer('2013_summer'); // should be 0
getAnswer('2013_autumn'); // should be 3

function getAnswer(question) {
  var numChilds = $('summary a[href="' + question + '"]').length; // 1001
  if (numChilds == 1) { // then a summary record was found
    console.log('Found summary for ' + question);
    // console.log('Nr of children for ' + question + ': ' + $(this).parent("details").children().length); 	
    // console.log('Nr of children for ' + question + ': ' + $(this).parent("ul").children().length); 
    // console.log('Nr of children for ' + question + ': ' + $(this).parent("details > li").length); 
    // console.log('Nr of children for ' + question + ': ' + $(this).next("ul li").length); 
    // console.log('Nr of children for ' + question + ': ' + $(this).next("ul > li").length); 
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul>
  <details>
    <summary><a class="sitemap" href="2013">Year</a></summary>
    <ul>
      <li><a class="sitemap" href="2013_spring">Spring</a></li>
      <li><a class="sitemap" href="2013_summer">Summer</a></li>
      <ul>
        <details>
          <summary><a class="sitemap" href="2013_autumn">Autumn</a></summary>
          <ul>
            <li><a class="sitemap" href="apples">Delicious Apples</a></li>
            <li><a class="sitemap" href="bananas">Yellow Bananas</a></li>
            <li><a class="sitemap" href="cacao">Warm Chocolate</a></li>
          </ul>
        </details>
      </ul>
      <li><a class="sitemap" href="2013_winter">Winter</a></li>
    </ul>
  </details>
</ul>

1 Ответ

0 голосов
/ 10 ноября 2018

После того, как mplungjan обновил мою память о том, как использовать $ (this), я пришел к выводу, что должен быть лучший и более быстрый способ, поэтому через некоторое время я нашел следующее решение, чтобы найти количество детей: 'принадлежащий' сводка : 

var numChilds = $('summary a[href="' + question + '"]').parent().next().children().length;

Получение количества детей, «принадлежащих» к «1006 * резюме» , не так просто, как должно быть, потому что резюме как таковое «стоит отдельно», поэтому у него нет детей; дети принадлежат к ul , который также (как и резюме) является частью details .

что делает приведенный выше код: Он находит сводную «запись» с уникальным значением href, затем он находит parent , который является КРАТКИМ, вы можете проверить с помощью этого кода: 

$('summary a[href="' + question + '"]').parent()[0].nodeName;

Затем он находит следующий брат сводка , что составляет ul (они оба являются потомками details , следовательно следующий может быть использован). Для этого ul затем запрашивается число (. Длина) из children . Итак, вернувшись на один шаг, а затем на два вперед, вы получите количество детей.

Надеюсь, что это было / было полезно для кого-то. По крайней мере, это было для меня.

...