我一直试图想出这一段时间而且我很接近,但在某个地方,我错过了一步。
目的:
我正在尝试获取sidenav的内容 - 其中包含列表和 子列表 - 然后在相同的列表组中输出这些内容 在页脚中。下面是HTML和jQuery。 编辑澄清我的目标:
我想要一些像这样的输入(我不确定如何使用java关联这两个值?):
第1节:A部分 第1节:B部分 第2节:C部分 第2节:D部分输出如下:
第1节
- A部分 - B部分 第2节
- C部分
- D部分
sidenav的HTML如下所示:
<li class="nav-section-one"><a href="/section-one/">Section One</a>
<ul class="sub-side-page-list">
<li class="nav-part-a"><a href="/section-one/part-a/" class="section-one">Part A</a></li>
<li class="nav-part-b"><a href="/section-one/part-b/" class="section-one">Part B</a></li>
</ul>
</li>
<li class="nav-section-two"><a href="/section-two/">Section Two</a>
<ul class="sub-side-page-list">
<li class="nav-part-c"><a href="/section-two/part-c/" class="section-two">Part C</a></li>
<li class="nav-part-d"><a href="/section-two/part-d/" class="section-two">Part D</a></li>
</ul>
</li>
我正试图在我的页脚中实现如下输出:
<div class="column">
<h3>Section One</h3>
<ul class="footer-column-section-one">
<li><a href="/section-one/part-a">Part A</a></li>
<li><a href="/section-one/part-b">Part B</a></li>
</ul>
</div>
<div class="column">
<h3>Section Two</h3>
<ul class="footer-column-section-two">
<li><a href="/section-two/part-c">Part C</a></li>
<li><a href="/section-two/part-d">Part D</a></li>
</ul>
</div>
我实际上最终得到的是这样输出:
第1节
第2节
每次迭代循环时,我都会得到上一个输出的内容。我只想要第1节中的A和B,以及第2节中的C和D,依此类推。如何只将我想要的结果迭代到相关的部分?我到目前为止的脚本如下:
<script type="text/javascript">
$(function() {
var mainNavItems, subNavItems, subNavItemsParent, mainNavLength, subNavLength, mainNavList, subNavList, mainNavItemsText, subNavItemsText, subNavLinks, subNavItemsLinks, subNavItemClass, i, val;
mainNavItems = ( $( "#doc-nav .side > li > a" ).toArray() );
subNavItems = ( $( "#doc-nav .side > li ul li a" ).toArray() );
var newHTMLmain = $.map(mainNavItems, function(value) {
return ("<div class='column'><h3>" + value.text + "</h3><ul class='footer-column-" + value.text.toLowerCase().replace(/ /g, "-") + "'></ul></div>");
});
$("#directorynav").html(newHTMLmain.join(""));
var newHTMLsub = "";
$.each(subNavItems, function(i, val) {
newHTMLsub += "<li><a href='" + val.href + "'>" + val.text + "</a></li>";
$( ".footer-column-" + val.className ).html( newHTMLsub );
});
});
</script>
答案 0 :(得分:1)
看到这种方式我正在解析你的HTML。
var _html = "";
$("li[class^='nav-section']").each(function(){
_html += '<div class="column">';
_html += '<h3>'+$(this).find("a").eq(0).html()+'</h3>';
_html += '<ul class="footer-column-section-one">';
$(this).find("li").each(function(){
var _link = $(this).find("a").attr("href");
var _text = $(this).find("a").html();
_html += '<li><a href="'+_link+'">'+_text+'</a></li>';
});
_html += '</ul>';
_html += '</div>';
});
console.log(_html);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-section-one"><a href="/section-one/">Section One</a>
<ul class="sub-side-page-list">
<li class="nav-part-a"><a href="/section-one/part-a/" class="section-one">Part A</a></li>
<li class="nav-part-b"><a href="/section-one/part-b/" class="section-one">Part B</a></li>
</ul>
</li>
<li class="nav-section-two"><a href="/section-two/">Section Two</a>
<ul class="sub-side-page-list">
<li class="nav-part-c"><a href="/section-two/part-c/" class="section-two">Part C</a></li>
<li class="nav-part-d"><a href="/section-two/part-d/" class="section-two">Part D</a></li>
</ul>
</li>
&#13;