ここから本文です

class(or idでもよい)をつけたliを画面をロードした時 classの順番(降順/照準)...

bea********さん

2017/1/517:35:47

class(or idでもよい)をつけたliを画面をロードした時
classの順番(降順/照準)に並び替えるjavascriptを
教えてください

<ul>

<li class="170103">C</li>
<li class="170101">A</li>
<li class="170104">D</li>
<li class="170102">B</li>
</ul>

A
B
C
D

閲覧数:
66
回答数:
2

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2017/1/618:19:01

書かれていらっしゃる例のように
  『<ul> 内に並び替えの対象外となる子エレメントが存在しない』
  『<ul> 内の子エレメントは必ず正の整数のクラス名を持っている』
  『<ul> 内の子エレメントのクラス名に重複はない』
という場合限定でしたら次のようにすればできると思います。



<html>
<head>
<meta charset="shift_jis">
<title>昇順ソートサンプル</title>
</head>
<body>

<ul>
<li class="170103">C</li>
<li class="170101">A</li>
<li class="170104">D</li>
<li class="170102">B</li>
</ul>

<script type="text/javascript">
//子を昇順にソートする親エレメントを取得
var elm = document.getElementsByTagName("ul")[0];
//HTMLを入れる配列を作成
var arr = new Array();
//対象の親エレメント内の子エレメントを走査
for(var i = 0; i < elm.children.length; i++){
    //配列のクラス名番号要素に子自体の HTML を代入
    arr[parseInt(elm.children[i].className)]
    = elm.children[i].outerHTML;
}
//親の中身を配列の要素を結合した HTML にする
elm.innerHTML = arr.join("");
</script>

</body>
</html>



とりあえず昇順ソートのサンプルを書きましたが
降順にソートさせたい場合は
配列の中身を逆順にすれば(reverseすれば)良いだけですね。



<html>
<head>
<meta charset="shift_jis">
<title>降順ソートサンプル</title>
</head>
<body>

<ul>
<li class="170103">C</li>
<li class="170101">A</li>
<li class="170104">D</li>
<li class="170102">B</li>
</ul>

<script type="text/javascript">
//子を降順にソートする親エレメントを取得
var elm = document.getElementsByTagName("ul")[0];
//HTMLを入れる配列を作成
var arr = new Array();
//対象の親エレメント内の子エレメントを走査
for(var i = 0; i < elm.children.length; i++){
    //配列のクラス名番号要素に子自体の HTML を代入
    arr[parseInt(elm.children[i].className)]
    = elm.children[i].outerHTML;
}
//★ 配列の要素を逆順にする
arr.reverse();
//親の中身を配列の要素を結合した HTML にする
elm.innerHTML = arr.join("");
</script>

</body>
</html>



何にしても最初に書いた
  『<ul> 内に並び替えの対象外となる子エレメントが存在しない』
  『<ul> 内の子エレメントは必ず正の整数のクラス名を持っている』
  『<ul> 内の子エレメントのクラス名に重複はない』
という3つの条件が整っているときにだけ
上のようにすれば簡単にソートができます。

※ 特に親エレメントが <ul> である必要はありませんけど。
   (親エレメントは <p> や <table> などでもかまいませんが。)

書かれていらっしゃる例のように
  『&lt;ul&gt; 内に並び替えの対象外となる子エレメントが存在しない』...

質問した人からのコメント

2017/1/12 09:23:13

回答ありがとうございます!

ベストアンサー以外の回答

1〜1件/1件中

tom********さん

2017/1/823:37:54

私なら以下のようにします。昇順で作ってみました。ご参考まで。

・li要素の一覧をdocument.getElementsByTagNameで取得
・liの一覧を走査し、classNameで比較する。
・insertBefore()でli要素の入れ替えをする。

ソートは単純挿入法と呼ばれるものです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>並び替え</title>
</head>
<body>
<ul id="ul">
<li class="170103">C</li>
<li class="170101">A</li>
<li class="170104">D</li>
<li class="170102">B</li>
</ul>
<script>

var sort = function(){
//ul要素を取得
var ul = document.getElementById("ul");

var list = [];
//li要素の一覧をタグ名から取得
var list = document.getElementsByTagName("li");

//ソート
for(var i=1; i<list.length; i++){
for(var k=i; k>0; k--){
if(list[k].className < list[k-1].className){
ul.insertBefore(list[k],list[k-1]);
}
}
}

};
window.addEventListener("load",sort,false);
</script>
</body>
</html>

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる