Question

所以我正在开发一个页面，其中有多个菜单，每个菜单都会被确定数量的列表项缩短，并添加了“显示更多”项目，告诉您菜单中还有多少项目。

我正在为循环使用jQuery .each函数，但动态变量“how_much_more”因显示错误的数字而停滞不前。

列表当前在第一个菜单上正确返回Show More（3），但第二个菜单在不应该返回show more链接时返回Show More（3）。

在我看来，“how_much_more”变量在循环中被覆盖。

建议？

修改：这是成品：http://codepen.io/dsm/pen/dYegzg 感谢大家的帮助！

$('.routing-menu-wrapper ul').each(function() {
  var how_much = $('li', this).length;
  var limit = 5;
  var how_much_more = how_much - limit;
  if (!$('.show-more-routing').length && !$('.nav-expanded', this).length && how_much_more > 0) {
    $('<li class="show-more-routing"><a href="">Show More (' + how_much_more + ')</a></li>').insertAfter('li:nth-child(' + limit + ')', this);
    $('li', this).removeClass('active');
  }

});

.routing-menu-wrapper li:nth-child(n+7) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="routing-menu-wrapper">
  <div class="moduletable">
    <h2>Menu 1</h2>
    <ul>
      <li><a href="#">Item 1</a>
      </li>
      <li><a href="#">Item 2</a>
      </li>
      <li><a href="#">Item 3</a>
      </li>
      <li><a href="#">Item 4</a>
      </li>
      <li><a href="#">Item 5</a>
      </li>
      <li><a href="#">Item 6</a>
      </li>
      <li><a href="#">Item 7</a>
      </li>
      <li><a href="#">Item 8</a>
      </li>
    </ul>
  </div>
  <h2>Menu 2</h2>
  <ul>
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
  </ul>
</div>
</div>

Answer 1

将insertAfter更改为

.insertAfter($(this).find('li:nth-child(' + limit + ')'))

目前，在第一次迭代本身＆＃34;显示更多＆＃34;正在添加到ul。

JSFiddle

Answer 2

在我看来，“how_much_more”变量在循环中被覆盖。

建议？

是的，这个。：）

$('.routing-menu-wrapper ul').each(function() {
  var how_much = $('li', this).length;
  var limit = 5;
  var how_much_more = how_much - limit;
  if (!$('.nav-expanded', this).length && how_much_more > 0) {
    $('<li class="show-more-routing"><a href="">Show More (' + how_much_more + ')</a></li>').insertAfter($(this).children('li:nth-child(' + limit + ')', this));
    $('li', this).removeClass('active');
  }

});

.routing-menu-wrapper li:nth-child(n+7) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="routing-menu-wrapper">
  <div class="moduletable">
    <ul>
      <li><a href="#">Item 1</a>
      </li>
      <li><a href="#">Item 2</a>
      </li>
      <li><a href="#">Item 3</a>
      </li>
      <li><a href="#">Item 4</a>
      </li>
      <li><a href="#">Item 5</a>
      </li>
      <li><a href="#">Item 6</a>
      </li>
      <li><a href="#">Item 7</a>
      </li>
      <li><a href="#">Item 8</a>
      </li>
  </ul>
  <ul>
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
    <li><a href="#">Item 6</a>
    </li>
  </ul>
</div>
</div>

Answer 3

列表当前在第一个菜单上正确返回Show More（3）但第二个菜单返回Show More（3）时不应返回a 显示更多链接。

在if条件下，在迭代中将当前context设置为.show-more-routing对象为this ul。

在if声明中，尝试使用ul index包含.each()参数，选择当前:eq()。

$('.routing-menu-wrapper ul').each(function(index) {
  var how_much = $('li', this).length;
  var limit = 5;
  var how_much_more = how_much - limit;
  if (!$('.show-more-routing', this).length 
     && !$('.nav-expanded', this).length 
     && how_much_more > 0) {

     $('<li class="show-more-routing"><a href="">Show More (' 
      + how_much_more + ')</a></li>')
     .insertAfter('ul:eq('+index+') li:nth-child(' + limit + ')');
     $('li', this).removeClass('active');
   }

});

.routing-menu-wrapper li:nth-child(n+7) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="routing-menu-wrapper">
  <div class="moduletable">
    <h2>Menu 1</h2>
    <ul>
      <li><a href="#">Item 1</a>
      </li>
      <li><a href="#">Item 2</a>
      </li>
      <li><a href="#">Item 3</a>
      </li>
      <li><a href="#">Item 4</a>
      </li>
      <li><a href="#">Item 5</a>
      </li>
      <li><a href="#">Item 6</a>
      </li>
      <li><a href="#">Item 7</a>
      </li>
      <li><a href="#">Item 8</a>
      </li>
    </ul>
  </div>
  <h2>Menu 2</h2>
  <ul>
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
  </ul>
</div>
</div>

jQuery .each函数不使用动态变量

3 个答案: