0

问候，

我是java脚本的新手，所以请耐心等待！我想使用JQuery选择器来实现一些目标。

我有一个列表菜单。看起来像这样...

<ul style="width:auto">
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
</ul>

好的，所以目前我正在使用该parseInt函数来检索ul.

var ul = $("ul");
var currentWidth = parseInt(ul.width);
var maxWidth = 400;

这给了我当前的宽度，我现在想创建一个 if 语句。这对我来说真的很棘手。

if(currentWidth <= maxWidth){
alert('great job, do nothing');
}
else {
  // WHAT DO I DO?!
  // I need to take all the elements that makes the ul exceed that maxWidth variable and assign them to a new array called extraItems
}

那么我如何获得这些物品。我担心这远远超出了基本！

任何帮助将不胜感激！

客观示例图片：imageShack 链接

4

3 回答 3

4 
else {
   var extraItems = [];
   $('ul li').each(function(i, e) {
      if ($(e).width() > maxWidth) {
         $(e).remove(); //? dunno if you want to remove em, but here's how
         extraItems.push(e);
      }
   });
   ...
}
于 2009-10-16T05:12:52.083 回答
1

查看 Andreas Grech 的这个社区 wiki帖子......您也可以制作自己的选择器来执行此操作。

编辑：哦，在阅读了你的最终目标（隐藏溢出）之后，为什么不直接overflow:hidden在你的内容包装器上使用 CSS 类，然后使用像scrollTo这样的插件来移动它呢？

编辑 #2 LOL 抱歉编辑了这么多……如果你只是为了学习，试试这段代码（我也让它在pastebin中运行），还要确保你查看 CSS，li默认情况下会有 100 ％ 宽度：

$(document).ready(function(){
 var ul = $("ul");
 var currentWidth = ul.width();
 var maxWidth = 400;
 if(currentWidth <= maxWidth){
  alert('great job, do nothing');
 } else {
  var liWidth = 0;
  var done = false;
  ul.find('li').each(function(indx){
   liWidth += $(this).width();
   if (liWidth > maxWidth && !done){
    ul.find('li:gt(' + (indx-1) + ')').hide();
    var done = true;
   }
  })
 }
 var savedLi = ul.find('li:hidden');
 alert( savedLi.length + ' elements were hidden');
})
于 2009-10-16T15:09:53.260 回答
1

以下是我将如何处理它：

// given these values:
var ul = $("ul");
var maxWidth = 200;

// the total width counter
var acc = 0;  

// find the li's and use the map (or filter) function to filter away unwanted elements
var overflow = ul.find('li').map(function(){

  // add current elm's width to our total
  acc += $(this).outerWidth();

  // within bounds - return nothing
  if ( acc < maxWidth ) {
    return null;
  }
  // limit reached - return element
  else {
    return this;
  }

});

// we are left with only the "overflow" elements...
overflow.hide();
于 2009-10-16T15:57:51.510 回答