Obtention d'éléments qui dépassent la valeur maxium. JAVASCRIPT/JQUERY

Question

salutations,

Je suis nouveau avec le script java alors supportez-moi! Je veux réaliser quelque chose en utilisant JQuery sélecteurs.

J'ai un menu de liste. Il ressemble à ceci ...

<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, donc actuellement j'utilise la fonction parseInt pour récupérer la valeur entière de la largeur actuelle de la ul.

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

Avec cela me donnant la largeur actuelle je voudrais maintenant créer une instruction if. C'est là que ça devient vraiment difficile pour moi.

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 
} 

Alors, comment puis-je obtenir ces éléments. Je crains que ce soit si loin de la base!

Toute aide serait grandement appréciée!

image par exemple Objectif: imageShack link

Answer 1

Voici comment je y faire face:

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

Vérifiez ce community wiki message par Andreas Grech ... vous pouvez faire votre propre sélection de le faire ainsi.

Editer: Oh et après avoir lu quel est votre but ultime (cacher le débordement) pourquoi ne pas simplement utiliser la classe CSS overflow:hidden sur votre gestionnaire de contenu, puis utiliser un plugin comme scrollTo pour le déplacer? Éditer # 2 LOL désolé pour l'édition tellement ... si vous faites cela pour apprendre, essayez ce code (je l'ai aussi en cours d'exécution dans un pastebin), assurez-vous également de regarder le CSS, le li par défaut aura une largeur de 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'); 
})