jquery HTML5 details and summary, problems counting children

Question

I'm having problems counting children in a huge 'index-like' file which uses the details and summary tags. Need to know how many children there are for a specific summary tag. The code example has just a small part of the complete file but it shows what I'm looking for: I call the function getAnswer with a 'href' value, the function does find the correct entry but from there I'm stuck: How to find the number of children. The commented-out lines show that I tried various things, but they all give the answer 0, so I guess I cannot use $(this). Any help is appreciated !!

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>

Answer 1

After mplungjan refreshed my memory of how to use $(this), I came to the conclusion that there must be a better and faster way, so after a while I came up with the following solution to find the number of children, 'belonging to' summary:

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

Getting the number of children ‘belonging to’ summary is not as straight forward as it should be, because summary as such ‘stands alone’, therefore it doesn’t have children; the children belong to the ul which is also (as summary is as well) part of details.

what does the above code do: It finds the summary ‘record’ with the unique href value, then it finds its parent, which is SUMMARY, you can check with this code:

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

It then finds the next sibling of summary, which is ul (they both are children of details, therefore next can be used). For this ul it then asks for the number (.length) of children. So by going back one step, and then two forwards, you get the number of children.

Hope this is/was useful for somebody. At least it was for me.