Question

我有一个带有顶级链接的菜单，这些链接具有关联的子菜单链接。

如何将各个顶级链接（即href）附加到其关联子菜单的底部？（我已经在函数的另一部分的此顶部菜单链接上设置了preventedDefault。）

在下面的小提琴中，我尝试使用.each（index）将正确的顶级href输出到关联的子菜单列表的底部，但是在每种情况下都输出所有顶级项。我尝试了许多其他方法，但是没有按预期工作。

提琴here

<ul class="main">
  <li><a href="http://google1.com">Top link 1</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
       <!-- TTop Link 1 href should be appended here-->
    </ul>
  </li>
  <li><a href="http://google2.com">Top link 2</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
       <!-- Top Link 2 href should be appended here -->
    </ul>
  </li>
  <li><a href="http://google3.com">Top link 3</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
      <!-- Top Link 3 href should be appended here-->
    </ul>
  </li>
</ul>

var topLevelLink = $('.main > li > a');

topLevelLink.each(function(index) {
    var topLevelLinkHref = $(this).attr('href', index);
  console.log(topLevelLinkHref);
   // create a new link at the bottom of the list and set the href to be our original top level link
   $('.inner').append('<li class="js-menu-item"><a href="' + topLevelLinkHref + '">See all</a></li>');
});


/* for (var i = 0; i < topLevelLink; i++) {
  var topLevelLinkHref = topLevelLink[i].attr('href');
  console.log(topLevelLinkHref)
  $('.inner').append('<li class="js-menu-item"><a href="' + topLevelLinkHref + '">See all</a></li>');
} */

Answer 1

必须使用:eq() Selector，该索引用于按索引选择元素。您必须遍历所有div并获得顶层菜单的href，然后使用index检查循环中项目的count，最后检查.inner:eq(" + count + ")，然后将您的顶级菜单作为子菜单添加到.inner div中。

var count = 0;    
var topLevelLink = $('.main > li > a');

$.each(topLevelLink, function (index, item) {
    var topLevelLinkHref = $(this).attr('href');
    
    if (index === count) { 
        $(".inner:eq(" + count + ")").append('<li class="js-menu-item"><a href="' + topLevelLinkHref + '">See all</a></li>'); // append top level href in submenu
    }
    
    count++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="main">
  <li><a href="http://google1.com">Top link 1</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
       <!-- TTop Link 1 href should be appended here-->
    </ul>
  </li>
  <li><a href="http://google2.com">Top link 2</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
       <!-- Top Link 2 href should be appended here -->
    </ul>
  </li>
  <li><a href="http://google3.com">Top link 3</a>
    <ul class="inner">
      <li><a href="http://google.com">One</a></li>
      <li><a href="http://google.com">Two</a></li>
      <li><a href="http://google.com">Three</a></li>
      <!-- Top Link 3 href should be appended here-->
    </ul>
  </li>
</ul>

将顶层菜单href附加到子子元素的底部

1 个答案: