Categorieën
[jQuery] geef class aan Li om de 3 Li 's
Jurriaan. op 03 maart 2010 #
Hoi, weet iemand hoe ik met jQuery selectors elke keer de 3 li een class kan meegeven.
de li moet een margin krijgen aan beide kanten. de andere li's kunnen deze niet krijgen want er staan er 3 op een rij als ik de buitenste li's een margin geef komen ze door de breedte van de div waar ze in staan op de volgende rij.
Ik denk dit met jQuery op te lossen door met een selector steeds de 3e li te pakken. maar mijn kennis is te beperkt om hier een fatsoenlijke regel voor te typen.
bijkomend probleem is dat het begint met de 2e li
in normale mensen taal wil ik dit: Selecteer li > X*3-1 > geef deze li's elke keer (margin: 0 10px;)
hierin moet X oneindig optellen beginnend vanaf 1 zodat elke mogelijk middelste li meegepakt kan worden.
hiermee selecteer ik alleen de 2e hoe kan ik hier een formule in verwerken?
<script>$("ul li:nth-child(2)").css('margin', 0 10px);</script>
Jurriaan. op 03 maart 2010 #
hmm misschien ga ik dit maar serverside regelen met een foreach loopje ofzo. Maar een oplossing is nog steeds welkom hoor want t is opzich een interessante functie.
jorisros op 03 maart 2010 #
Ik weet niet of het in 1 selector kan. Maar je kan het altijd op deze manier oplossen:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$(".list").children('li').each(function(){
if(i == 3)
{
$(this).css('margin', '0px 10px');
i = 0;
}
i++;
});
});
</script>
</head>
<body>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</body>
</html>
Ben benieuwd of iemand dit in 1 selector weet op te lossen
Robin H. op 03 maart 2010 #
Wellicht kun je zoiets proberen:
<script type="text/javascript">
// Aantal elementen
var maxLi = $('ul li').size();
for (var i = 0; i < maxLi; i++)
{
// Indien restwaarde van i / 3 gelijk staat aan 0.
if (i % 3 == 0)
{
$("ul li:nth-child("+i+")").css('margin', '0 10px');
}
}
</script>
iJoost op 03 maart 2010 #
Ik begrijp niet helemaal wat je wilt maar ik heb de indruk dat je het hier-, hier- of hiermee wel voor elkaar kunt krijgen: http://www.w3.org/TR/CSS2/selector.html#descendant-selectors http://www.w3.org/TR/CSS2/selector.html#child-selectors http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
arri op 04 maart 2010 #
jorisros' code is -bijna- hoe ik het zou doen...
het kan nl nog makkelijker, omdat de ''each' functie je zelf al de index meegeeft:$("ul.list").children('li').each(function(i){if(i%3==0) $(this).css({margin:'0px 10px'})})(check die i)
en ik nu ff mod (%) om het kort te houden...
maar ik vind het zelf in dit soort gevallen makkelijker om een css- class te definieren (in je css file), bv.
lu li.indent { margin:0 10px; }
dan hoef je in jquery geen css te schrijven, maar doe je simpelweg:$("ul.list").children('li').each(function(i){if(i%3==0) $(this).addClass('indent')})en dan later $("ul.list").children('li').each(function(i){if(i%3==0) $(this).removeClass('indent')})
indent kan dan ook in een variabele zitten natuurlijk, die evt. classes combineert
zo hou je jqueryu/javascript en css een beetje overzichtelijk. 
raptorNL op 04 maart 2010 #
Mijn hemel, wat komt men hier met ingewikkelde oplossingen aandraven. :P Creatief, maar het kan ook zo veel eenvoudiger:
$('li:nth-child(3n+2)').css({margin:'0px 10px'}); // iedere 3e, vanaf nummer 2
:nth-child() is best wel krachtig, als je weet hoe het werkt.
PS. i.p.v. .css() zou ik .addClass() gebruiken en de CSS daar houden waar het hoort: in je stylesheet.
Jurriaan. op 06 maart 2010 #
raptorNL Mijn hemel, wat komt men hier met ingewikkelde oplossingen aandraven. :P Creatief, maar het kan ook zo veel eenvoudiger:$('li:nth-child(3n+2)').css({margin:'0px 10px'}); // iedere 3e, vanaf nummer 2:nth-child() is best wel krachtig, als je weet hoe het werkt.
ja vet, dat is precies wat ik bedoelde! :D mooi om dit in dit topic de creatieve oplossingen te zien inderdaad. Van veel code naar een regeltje. mooi einde, bedankt voor de inzet JS-heads. ik heb de site ge-update voor als iemand het resultaat van dit regeltje wil zien
Advertentie
Je kunt alleen reageren met een gratis OMT account.
Log in of registreer.
Inloggen
Over dit topic
Gestart op 03 maart 2010 door Jurriaan.
Laatste reactie door Jurriaan.
Reageer op dit topic