[jQuery] Sort elements problem
Im trying to recreate tablesort but having issues when clicking col2.
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div ID="col1"> COL1 </div>
<div ID="col2"> COL2 </div>
<div id='Foo'>
<p class='items'>4<span class='second'>1</span>
<p class='items'>2<span class='second'>3</span>
<p class='items'>R<span class='second'>2</span>
<p class='items'>T<span class='second'>6</span>
<p class='items'>B<span class='second'>8</span>
<p class='items'>3<span class='second'>T</span>
<p class='items'>1<span class='second'>H</span>
<p class='items'>G<span class='second'>W</span>
<p class='items'>9<span class='second'>A</span>
<p class='items'>0<span class='second'>B</span>
</div>
<script type="text/javascript">
$("#col1").click( function(){
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
$("p.items").sort(function(a,b){ return a.innerHTML >
b.innerHTML ? 1 : -1; }).appendTo("#Foo");
});
$("#col2").click( function(){
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
$("span.second").sort(function(a,b){ return a.innerHTML >
b.innerHTML ? 1 : -1; }).appendTo("#Foo");
});
</script>
</body>
</html>