Sorteren van automatische Index met javascript

[TomDelft]

Hallo allemaal, ik maak voor een website die ik momenteel aan het bouwen ben gebruik van een scriptje die een automatische index genereerd van alle <h4> koppen op de pagina. Nou zou ik graag zien dat die index ook op alfabetische volgorde komt te staan. Weet iemand of dat kan, en hoe? het gaat om de volgende code:

<script type='text/javascript' >var els=document.getElementsByTagName('h4');
if (!els.length) { document.getElementById('indexDiv').style.display='none' ;}
else { var idx=''; for (i=0; i<els.length; i++) { idx += '<a href="#quickIDX'+i+'">'+els.innerHTML+'</a><BR>'; els.innerHTML='<a name="quickIDX'+i+'"></a>'+els.innerHTML; } document.getElementById('indexContents').innerHTML=idx;}</script>

dan komt de index in deze div

<div id="tekstblokgroen">
<div id='indexDiv'> <div id='indexContents'></div></div>
</div>

Ik heb er de ballen verstand van eigenlijk, ik hoop dat er iemand is die me hier verder mee kan helpen!

Groeten Tom

 

[janusss]

Misschien dat dit werkt?

<script type='text/javascript' >
var els=document.getElementsByTagName('h4');
if (!els.length) { 
document.getElementById('indexDiv').style.display='none' ;
}
else { 
var idx=''; 
var innerhtmls = new Array();
for (i=0; i<els.length; i++) {
innerhtmls[i] = els[i].innerHTML;
}
innerhtmls = innerhtmls.sort();
for(i=0; i<els.length; i++){
idx += '<a href="#quickIDX'+i+'">' + innerhtmls[i] + '</a><BR>';
els[i].innerHTML='<a name="quickIDX'+i+'"></a>'+els[i].innerHTML; // wat doet deze regel?
} 
document.getElementById('indexContents').innerHTML=idx;}</script>

 

[TomDelft]

Bedankt voor je snelle reactie! ja dat doet wel iets maar de volgorde van de links blijft gewoon zoals op de pagina, m.a.w de kopjes in de index kloppen niet meer met de volgorde op de pagina. Dat ene stukje code geeft trouwens een id aan elk <h4> element volgens mij (quickIDX'+i) waarnaartoe gelinkt wordt.

je kunt het hier zien overigens:

met jouw script:
http://www.quwest.com/test/Huuraanbod/utrechtgooi.html

en (een andere regio) zonder:
http://www.quwest.com/test/Huuraanbod/zuidhollandrotterdam.html

bedankt voor je hulp!

Tom

 

[janusss]

Dit is wel raar :/ hij sorteert wel maar niet volledig alfabetisch

Sorry, ik kan je niet verder helpen.

 

[Egel]

Dit zet de index op volgorde en houdt ook de link met de juiste ankers in stand:

<div id="indexDiv"><div id='indexContents'></div></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>Abc</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>123</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>xyz</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>abc</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script type="text/javascript">
 // Egel 071101 ;)
 var idx = '', index = new Array(), els = document.getElementsByTagName('h4');
 if (!els.length) {
  document.getElementById('indexDiv').display = 'none';
  } else {
  for (var i = 0; i < els.length; i++) index[i] = {nr: i, html: els[i].innerHTML};
  function compare(a,b) {
   return (a.html).localeCompare(b.html);
   };
  index.sort(compare);
  for (var i = 0; i < index.length; i++) {
   idx += '<a href="#quickIDX' + i + '">' + index[i].html + '</a><br>';
   els[index[i].nr].innerHTML = '<a name="quickIDX' + i +'"></a>' + index[i].html;
   };
  document.getElementById('indexContents').innerHTML = idx;
  };
</script>

Vr.Gr. Egel.

 

[TomDelft]

Top!, ben nu aan het werk, maar ga het gelijk proberen straks!... bedankt

 

[Egel]

Dit is wel raar :/ hij sorteert wel maar niet volledig alfabetisch

Ik was eerder al op het goede spoor gezet doordat je de array kopiëerde, het rechtstreeks sorteren van de els-array had ik geprobeerd maar dat lukte niet.

En nu weer: :thumb: er staan verschillende tags in de .innerHTML die het sorteren verstoorden.

Dit script filterd die er nu uit door .innerText (en .textContent voor firefox) te gebruiken bij het sorteren.

<div id="indexDiv"><div id='indexContents'></div></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>Abc</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4><strong>123</strong></h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4><span class="vet">xyz</span></h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h4>abc</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script type="text/javascript">
 // Egel 071101 ;)
 var idx = '', index = new Array(), els = document.getElementsByTagName('h4');
 if (!els.length) {
  document.getElementById('indexDiv').display = 'none';
  } else {
  for (var i = 0; i < els.length; i++) index[i] = {nr: i, html: els[i].innerHTML, text: (els[i].textContent ? els[i].textContent : els[i].innerText)};
  function compare(a,b) {
   return (a.text).localeCompare(b.text);
   };
  index.sort(compare);
  for (var i = 0; i < index.length; i++) {
   idx += '<a href="#quickIDX' + i + '">' + index[i].html + '</a><br>';
   els[index[i].nr].innerHTML = '<a name="quickIDX' + i +'"></a>' + index[i].html;
   };
  document.getElementById('indexContents').innerHTML = idx;
  };
</script>

Vr.Gr. Egel.

 

[TomDelft]

Works like a charm!... super relaxt

 

[Egel]

Ziet er mooi uit!

Zet je nog even je vraag op opgelost dan? Dat kan rechtsonder bij 'status van de vraag'.


Vr.Gr. Egel.