根据相应的类

时间:2018-02-13 05:46:08

标签: javascript php jquery arrays

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

目的:

  

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

    1 个答案:

    答案 0 :(得分:1)

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

    &#13;
    &#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;
    &#13;
    &#13;