Ottenere gli elementi che superano il valore massimo. JavaScript / jQuery

Question

saluti,

Sono nuovo con java script in modo da portare con me! Voglio realizzare qualcosa utilizzando i selettori JQuery.

Ho un menu della lista. Sembra che questo ...

<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>

Ok, attualmente sto usando la funzione parseInt per recuperare il valore intero della larghezza corrente del ul.

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

Con che mi dà la larghezza corrente mi piacerebbe creare ora un'istruzione if. Questo è dove si fa veramente difficile per me.

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
}

Quindi, come faccio ad ottenere tali elementi. Temo che questo è così ben oltre la base!

Qualsiasi aiuto sarebbe così molto apprezzato!

immagine Obiettivo esempio: collegamento ImageShack

Answer 1

Ecco come vorrei trattare con esso:

// 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();

Answer 2

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);
      }
   });
   ...
}

Answer 3

Dai un'occhiata a questo comunità wiki messaggio da Andreas Grech si ... può fare il vostro proprio selettore a fare anche questo.

Edit: Oh, e dopo aver letto ciò che il vostro obiettivo finale è (nasconde l'overflow) perché non utilizzare la classe overflow:hidden CSS sul tuo involucro contenuti, quindi utilizzare un plugin come scrollTo per spostarla?

Modifica # 2 LOL dispiaciuto per l'editing così tanto ... se si sta solo facendo questo per imparare, provare questo codice (ho anche in esecuzione in un pastebin ), anche fare in modo si guarda al CSS, l'li per default avrà larghezza di 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');
})