Question

我一直试图想出这一段时间而且我很接近，但在某个地方，我错过了一步。

目的：

我正在尝试获取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节

A部分

B部分

第2节

A部分

B部分

C部分

D部分

每次迭代循环时，我都会得到上一个输出的内容。我只想要第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>

Answer 1

看到这种方式我正在解析你的HTML。

＆＃13;

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;

根据相应的类

1 个答案: