Trouble understanding why assigning sorted list with JavaScript - Microsoft Community
sample code sorting html, list of names alphabetically.
code works in browsers:
<!doctype html>
<html>
<head>
<title>works in current browser.</title>
<meta charset="utf-8">
</head>
<body>
<div class="klass"><p>filip</p></div>
<div class="klass"><p>ivar</p></div>
<div class="klass"><p>gustav</p></div>
<div class="klass"><p>ludvig</p></div>
<div class="klass"><p>johan</p></div>
<div class="klass"><p>kalle</p></div>
<div class="klass"><p>östen</p></div>
<div class="klass"><p>erik</p></div>
<div class="klass"><p>åke</p></div>
<div class="klass"><p>viktor</p></div>
<div class="klass"><p>sigurd</p></div>
<div class="klass"><p>david</p></div>
<div class="klass"><p>tore</p></div>
<div class="klass"><p>bertil</p></div>
<div class="klass"><p>cesar</p></div>
<div class="klass"><p>adam</p></div>
<div class="klass"><p>ärlig</p></div>
<div class="klass"><p>yngve</p></div>
<div class="klass"><p>wilhelm</p></div>
<div class="klass"><p>xerxes</p></div>
<div class="klass"><p>zäta</p></div>
<div class="klass"><p>urban</p></div>
<div class="klass"><p>qvintus</p></div>
<div class="klass"><p>olof</p></div>
<div class="klass"><p>rudolf</p></div>
<div class="klass"><p>petter</p></div>
<div class="klass"><p>niklas</p></div>
<div class="klass"><p>martin</p></div>
<script type="text/javascript">
var lista = document.getelementsbyclassname("klass");
var nylista = array.prototype.slice.call(lista);
nylista.sort(function (a, b) {
return a.innertext.localecompare(b.innertext);
});
//difference starts here
var explorerarray = [];
(i = 0; < nylista.length; i++) {
explorerarray[i] = nylista[i].outerhtml;
}
(i = 0; < explorerarray.length; i++) {
lista[i].outerhtml = explorerarray[i];
}
//difference ends here
</script>
</body>
</html>
doesn't work in explorer in chrome , firefox , edge:
<!doctype html>
<html>
<head>
<title>doesn't work in explorer</title>
<meta charset="utf-8">
</head>
<body>
<div class="klass"><p>filip</p></div>
<div class="klass"><p>ivar</p></div>
<div class="klass"><p>gustav</p></div>
<div class="klass"><p>ludvig</p></div>
<div class="klass"><p>johan</p></div>
<div class="klass"><p>kalle</p></div>
<div class="klass"><p>östen</p></div>
<div class="klass"><p>erik</p></div>
<div class="klass"><p>åke</p></div>
<div class="klass"><p>viktor</p></div>
<div class="klass"><p>sigurd</p></div>
<div class="klass"><p>david</p></div>
<div class="klass"><p>tore</p></div>
<div class="klass"><p>bertil</p></div>
<div class="klass"><p>cesar</p></div>
<div class="klass"><p>adam</p></div>
<div class="klass"><p>ärlig</p></div>
<div class="klass"><p>yngve</p></div>
<div class="klass"><p>wilhelm</p></div>
<div class="klass"><p>xerxes</p></div>
<div class="klass"><p>zäta</p></div>
<div class="klass"><p>urban</p></div>
<div class="klass"><p>qvintus</p></div>
<div class="klass"><p>olof</p></div>
<div class="klass"><p>rudolf</p></div>
<div class="klass"><p>petter</p></div>
<div class="klass"><p>niklas</p></div>
<div class="klass"><p>martin</p></div>
<script type="text/javascript">
var lista = document.getelementsbyclassname("klass");
var nylista = array.prototype.slice.call(lista);
nylista.sort(function (a, b) {
return a.innertext.localecompare(b.innertext);
});
//difference starts here
(i = 0; < lista.length; i++) {
lista[i].outerhtml = nylista[i].outerhtml;
}
//difference ends here
</script>
</body>
</html>
can explain why latter code in explorer fails it's job?
in explorer incomplete list returned. tested couple of versions, on ie 11.0.9600.18666 , 11.296.15063.0. if works in other versions. please let me know.
code works in browsers:
<!doctype html>
<html>
<head>
<title>works in current browser.</title>
<meta charset="utf-8">
</head>
<body>
<div class="klass"><p>filip</p></div>
<div class="klass"><p>ivar</p></div>
<div class="klass"><p>gustav</p></div>
<div class="klass"><p>ludvig</p></div>
<div class="klass"><p>johan</p></div>
<div class="klass"><p>kalle</p></div>
<div class="klass"><p>östen</p></div>
<div class="klass"><p>erik</p></div>
<div class="klass"><p>åke</p></div>
<div class="klass"><p>viktor</p></div>
<div class="klass"><p>sigurd</p></div>
<div class="klass"><p>david</p></div>
<div class="klass"><p>tore</p></div>
<div class="klass"><p>bertil</p></div>
<div class="klass"><p>cesar</p></div>
<div class="klass"><p>adam</p></div>
<div class="klass"><p>ärlig</p></div>
<div class="klass"><p>yngve</p></div>
<div class="klass"><p>wilhelm</p></div>
<div class="klass"><p>xerxes</p></div>
<div class="klass"><p>zäta</p></div>
<div class="klass"><p>urban</p></div>
<div class="klass"><p>qvintus</p></div>
<div class="klass"><p>olof</p></div>
<div class="klass"><p>rudolf</p></div>
<div class="klass"><p>petter</p></div>
<div class="klass"><p>niklas</p></div>
<div class="klass"><p>martin</p></div>
<script type="text/javascript">
var lista = document.getelementsbyclassname("klass");
var nylista = array.prototype.slice.call(lista);
nylista.sort(function (a, b) {
return a.innertext.localecompare(b.innertext);
});
//difference starts here
var explorerarray = [];
(i = 0; < nylista.length; i++) {
explorerarray[i] = nylista[i].outerhtml;
}
(i = 0; < explorerarray.length; i++) {
lista[i].outerhtml = explorerarray[i];
}
//difference ends here
</script>
</body>
</html>
doesn't work in explorer in chrome , firefox , edge:
<!doctype html>
<html>
<head>
<title>doesn't work in explorer</title>
<meta charset="utf-8">
</head>
<body>
<div class="klass"><p>filip</p></div>
<div class="klass"><p>ivar</p></div>
<div class="klass"><p>gustav</p></div>
<div class="klass"><p>ludvig</p></div>
<div class="klass"><p>johan</p></div>
<div class="klass"><p>kalle</p></div>
<div class="klass"><p>östen</p></div>
<div class="klass"><p>erik</p></div>
<div class="klass"><p>åke</p></div>
<div class="klass"><p>viktor</p></div>
<div class="klass"><p>sigurd</p></div>
<div class="klass"><p>david</p></div>
<div class="klass"><p>tore</p></div>
<div class="klass"><p>bertil</p></div>
<div class="klass"><p>cesar</p></div>
<div class="klass"><p>adam</p></div>
<div class="klass"><p>ärlig</p></div>
<div class="klass"><p>yngve</p></div>
<div class="klass"><p>wilhelm</p></div>
<div class="klass"><p>xerxes</p></div>
<div class="klass"><p>zäta</p></div>
<div class="klass"><p>urban</p></div>
<div class="klass"><p>qvintus</p></div>
<div class="klass"><p>olof</p></div>
<div class="klass"><p>rudolf</p></div>
<div class="klass"><p>petter</p></div>
<div class="klass"><p>niklas</p></div>
<div class="klass"><p>martin</p></div>
<script type="text/javascript">
var lista = document.getelementsbyclassname("klass");
var nylista = array.prototype.slice.call(lista);
nylista.sort(function (a, b) {
return a.innertext.localecompare(b.innertext);
});
//difference starts here
(i = 0; < lista.length; i++) {
lista[i].outerhtml = nylista[i].outerhtml;
}
//difference ends here
</script>
</body>
</html>
can explain why latter code in explorer fails it's job?
in explorer incomplete list returned. tested couple of versions, on ie 11.0.9600.18666 , 11.296.15063.0. if works in other versions. please let me know.
hi,
for better assistance regarding matter, suggest post query on our microsoft developer network website, due complexity of issue on assigning sorted list using javascript in internet explorer. community comprises professionals , developers can provide tips , troubleshooting concern.
if have further questions, feel free post on thread.
Internet Explorer / Internet Explorer 11 / Windows 10
Comments
Post a Comment