<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>sort | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/sort/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Fri, 19 Mar 2010 17:25:44 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.10</generator>
<site xmlns="com-wordpress:feed-additions:1">122803348</site>	<item>
		<title>jQueryを使って要素を並べ替えるサンプル</title>
		<link>https://blog.verygoodtown.com/2010/03/jquery-sort-table-and-list/</link>
					<comments>https://blog.verygoodtown.com/2010/03/jquery-sort-table-and-list/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Sat, 20 Mar 2010 02:24:43 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[sort]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=3537</guid>

					<description><![CDATA[<p>「Sorting elements with jQuery」にてテーブルやリストのソートの作り方を紹介していました。 指定したエレメントを並べ替えたり、並び替えのルールを自分で作り込みができるため、実務で使う場合に良さそ [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/03/jquery-sort-table-and-list/">jQueryを使って要素を並べ替えるサンプル</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100320-02.jpg" alt="20100320-02" title="20100320-02" width="600" height="140" class="alignnone size-full wp-image-3541" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100320-02.jpg 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100320-02-300x70.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /><br />
「<a href="http://james.padolsey.com/javascript/sorting-elements-with-jquery/" target="_blank">Sorting elements with jQuery</a>」にてテーブルやリストのソートの作り方を紹介していました。</p>
<p>指定したエレメントを並べ替えたり、並び替えのルールを自分で作り込みができるため、実務で使う場合に良さそうです。</p>
<p>詳しくは以下<br />
<span id="more-3537"></span></p>
<h3>並び替え方法などの自由なカスタマイズが可能</h3>
<p>jQueryでテーブルをソートさせるプラグインはいくつかありますが、デザインが入っていたり、並び替え方法のカスタマイズが難しかったりして実務で使えるものは少なかったと思います。</p>
<p>以下のような設定で実装できるようです。</p>
<p>htmlは単純なリスト要素で作成します。</p>
<pre class="brush:xml;">
&lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Banana&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Carrot&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Apple&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>並び替えのルールは自前で構築する必要があります。<br />
アルファベット順にする場合</p>
<pre class="brush:js;">
$('li').sort(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});
</pre>
<p>数値順にする場合</p>
<pre class="brush:js;">
$('li').sort(function(a, b){
    return  (isNaN(a) || isNaN(b) ?
        a > b : +a > +b
    ) ?
        inverse ? -1 : 1 :
        inverse ? 1 : -1;
});
</pre>
<p>並び替えをJavaScriptで実現したい場合にいかがでしょうか。</p>The post <a href="https://blog.verygoodtown.com/2010/03/jquery-sort-table-and-list/">jQueryを使って要素を並べ替えるサンプル</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/03/jquery-sort-table-and-list/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">3537</post-id>	</item>
	</channel>
</rss>
