jQueryでxmlを読み込んで、五十音順にソート

質問

jQueryでxmlを読み込んで、五十音順にソート

qa6111214でjQueryでXMLを操作する方法について質問させていただいた者です。
たびたび申し訳有りません。質問させていただきます。
jQueryでxmlで読み込んで、五十音順にソートしたいのですが方法がわかりません。

----------------------------------------------------------------------------------------------------
<data>
<item>
<link>hoge1.html</link>
<name>山田 太郎</name>
<syllabary>やまだたろう</syllabary>
</item>

<item>
<link>hoge2.html</link>
<name>山田 花子</name>
<syllabary>やまだはなこ</syllabary>
</item>

<item>
<link>hoge3.html</link>
<name>田中 太郎</name>
<syllabary>たなかたろう</syllabary>
</item>

<item>
<link>hoge4.html</link>
<name>田中 花子</name>
<syllabary>たなかはなこ</syllabary>
</item>

<item>
<link>hoge5.html</link>
<name>鈴木 太郎</name>
<syllabary>すずきたろう</syllabary>
</item>

<item>
<link>hoge6.html</link>
<name>鈴木 花子</name>
<syllabary>すずきはなこ</syllabary>
</item>
</data>
------------------------------------------------------------------------------------------------
というxmlデータをjQueryで読み込んで、五十音順にソートして表示する方法を探しています。
例えば……
------------------------------------------------------------------------------------------------
<a href="hoge5.html">鈴木 太郎</a>
<a href="hoge6.html">鈴木 花子</a>
<a href="hoge3.html">田中 太郎</a>
<a href="hoge4.html">田中 花子</a>
<a href="hoge1.html">山田 太郎</a>
<a href="hoge2.html">山田 花子</a>
------------------------------------------------------------------------------------------------
といった具合に書き出したいのですが……
ご教授願います。また、参考になりそうな書籍／サイトはありますでしょうか。
宜しくお願い致します。

回答No.1

kuzumiHK · ベストアンサー

もっとスマートな書き方もありそうですが、
ｊQueryで取り出したデータを,でつないだ配列にして、
ソートしてから再びsplitでデータをバラバラにして、
入れ込んでみました。

$(function(){
var myArray = new Array();
$.ajax({
url: "data.xml",
dataType: 'xml',
cache: false,
timeout: 1000,
error: function(){
alert("xmlファイルの読み込みに失敗しました");
},
success: function (data){
$(data).find("item").each(function(i){
myArray[i] = $(this).find("syllabary").text() + ',' + $(this).find("name").text() + ',' + $(this).find("link").text();
});
myArray = myArray.sort();
$(myArray).each(function(i){
var myData = myArray[i].split(",");
$("ul.column").append('<li><a href="'+myData[2]+'">'+myData[1]+'（'+myData[0]+'）</a></li>');
});
}
});
$("li.noJavaScript").remove();
});

お礼

わかりやすい解説ありがとうございます。
配列の使い方が少しわかりました。

やっぱり、付け焼き刃のjavaScriptじゃ、なかなか難しいんだな。。。と思いました。
jQueryはcssっぽい書き方なので、どうにかなるんじゃなかろかと思っていましたが、
javaScriptからきちんと勉強しなければと再認識いたしました。
ありがとうございます。