JavaScript - 如何从 li 元素移动 href 并覆盖 h2 标签中的 href

Question

我的代码：

 <section class="section"> <h2 class="section-tree-title"> <a href="{{url}}">{{name}}</a> </h2> <ul class="article-list"> <li class="article-list-item"> <a href="{{url}}" class="article-list-link">{{title}}</a> </li> </ul> </section> <section class="section"> <h2 class="section-tree-title"> <a href="{{url}}">{{name}}</a> </h2> <ul class="article-list"> <li class="article-list-item"> <a href="{{url}}" class="article-list-link">{{title}}</a> </li> <li class="article-list-item"> <a href="{{url}}" class="article-list-link">{{title}}</a> </li> </ul> </section>

题

上面的代码是在我们的 zendesk 系统上动态生成的，它列出了部分及其包含的任何文章。

我们想在 javascript 中操作它，以便在每个“部分”类中计算“li”标签。
如果该部分仅包含 1 个 li 元素，那么我们希望从该特定 li 标签中获取 url 并覆盖 h2 标签中的 url。 然后需要隐藏该部分中的<ul>块，因为标题中的链接是定位文章所需的全部内容。

我知道很奇怪，但这样做的目的是允许用户直接访问任何一篇文章。

非常感谢任何帮助和建议。

Answer 1

我为您的部分提供了一个自定义类my-section ，因此此代码不会干扰您正在进行的任何其他操作。

 const sections = document.querySelectorAll('.my-section'); sections.forEach(section => { const sec_header = section.children[0]; const sec_ul = section.children[1]; if(sec_ul.children.length === 1) { // if we are here, it means there is only 1 "li" const only_li = sec_ul.children[0]; sec_header.children[0].href = only_li.children[0].href; sec_ul.hidden = true; } });

 <section class="section my-section"> <h2 class="section-tree-title"> <a href="header-1-url">{{name}}</a> </h2> <ul class="article-list"> <li class="article-list-item"> <a href="li-1.1-url" class="article-list-link">{{title}}</a> </li> </ul> </section> <section class="section my-section"> <h2 class="section-tree-title"> <a href="header-2-url">{{name}}</a> </h2> <ul class="article-list"> <li class="article-list-item"> <a href="li-2.1-url" class="article-list-link">{{title}}</a> </li> <li class="article-list-item"> <a href="li-2.2-url" class="article-list-link">{{title}}</a> </li> </ul> </section>