jquery HTML5 细节和总结，计算孩子的问题答案

【问题标题】：jquery HTML5 details and summary, problems counting childrenjquery HTML5 细节和总结，计算孩子的问题
【发布时间】：2019-04-10 23:24:41
【问题描述】：

我在使用详细信息和摘要标签的巨大“类似索引”文件中计算子项时遇到问题。需要知道特定摘要标签有多少个孩子。代码示例只有完整文件的一小部分，但它显示了我正在寻找的内容：我使用“href”值调用函数 getAnswer，该函数确实找到了正确的条目，但从那里我被卡住了：如何找出孩子的数量。注释掉的行表明我尝试了各种方法，但它们都给出了答案 0，所以我想我不能使用 $(this)。任何帮助表示赞赏！

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>

【问题讨论】：

您要查找achildren 的数量吗？
$('summary a[href="' + question + '"]').each(function() { here you can use $(this) });
致 Mojo Allmighty：是的，如果有命中，例如2013_autumn，我需要知道这个摘要有多少个孩子，所以答案应该是3，因为这个找到的摘要下的
- 标签。
致 mplungjan：谢谢，完全忘记了在找到命中的函数中包含 $(this)。谢谢！

标签： jquery children details-tag summary-tag

【解决方案1】：

mplungjan 刷新了我对 $(this) 的使用方法的记忆后，得出的结论是肯定有更好更快的方法，所以过了一会儿我想出了以下解决方案来查找孩子的数量， '属于'总结：

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

获取“属于”summary的孩子的数量并不像应有的那么直接，因为summary本身是“独立的”，因此它没有孩子；孩子属于 ul，这也是（作为摘要也是）details 的一部分。

上面的代码做了什么：它找到具有唯一href值的摘要“记录”，然后找到它的父，即SUMMARY，您可以使用以下代码检查：

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

然后它找到 summary 的 下一个兄弟，即 ul（它们都是 details 的子级，因此可以使用 next）。对于这个 ul，它会询问 children 的 number (.length)。因此，通过后退一步，然后前进两步，您可以获得孩子的数量。

希望这对某人有用。至少对我来说是这样。

【讨论】：