Kijken hoeveel elementen na een bepaald element komen
Ik ben op zoek naar een mogelijkheid om met jQuery de elementen te tellen die na een bepaald element komen. Bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
</head>
<body>
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 1
</div>
<div class="item1">
Item 1
</div>
</body>
</html>
<head>
</head>
<body>
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 1
</div>
<div class="item1">
Item 1
</div>
</body>
</html>
Kan ik op een of andere manier het aantal item1's tellen die NA item2 komen?
Gewijzigd op 06/12/2012 08:51:01 door Albert de Wit
Je zou de div's in dit geval nog een attribuut id="menuitem" kunnen geven, wat dan eigenlijk weer niet mag omdat
elke id uniek behoort te zijn.
Je kan dan wel met javascript/jquery het aantal div elementen tellen die id='menuitem' hebben. in een loopje kun je dan opnieuw beginnen te tellen als je div class == "item2" is of als je div innerHTML == 'item2' is
Gewijzigd op 06/12/2012 09:07:48 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
var n = $('div').length;
alert('aantal: ' n); // geeft 'aantal: 4' terug
var n = $('.item1').length;
alert('aantal: ' n); // geeft 'aantal: 3' terug
var n = $('item2').length;
alert('aantal: ' n); // geeft 'aantal: 1' terug
alert('aantal: ' n); // geeft 'aantal: 4' terug
var n = $('.item1').length;
alert('aantal: ' n); // geeft 'aantal: 3' terug
var n = $('item2').length;
alert('aantal: ' n); // geeft 'aantal: 1' terug
voorbeeld: http://jsfiddle.net/Navelpluisje/asKxn/1/
Gewijzigd op 06/12/2012 10:01:19 door Erwin Goossen
Code (php)
1
$('div.item2').nextAll().length
De functie nextAll selecteert alle elementen na het geselecteerde element. Hierbij worden geen kinderen of ouders meegenomen, dus alleen de elementen op dezelfde hoogte om het zo maar te zeggen. length is gewoon een property van de array.
Zou je na het element met class item2 ook nog item3 elementen hebben die je niet wilt en dus alleen item1, dan kan je die selector ook nog meegeven aan de functie nextAll().