Skip to content

Instantly share code, notes, and snippets.

@umidjons

umidjons/sort_li_by_child_input_value.html

Created August 6, 2013 11:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save umidjons/6163738 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save umidjons/6163738 to your computer and use it in GitHub Desktop.
Download ZIP
Sort <li> items by child element value
Raw
sort_li_by_child_input_value.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select tag</title>
</head>
<body>
<ul id="file-system">
<li>
<img src="images/folder.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev" data-type="1">
<span class="filename">..</span>
</li>
<li>
<img src="images/folder.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/admin" data-type="1">
<span class="filename">admin</span>
</li>
<li>
<img src="images/folder.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/chat" data-type="1">
<span class="filename">chat</span>
</li>
<li>
<img src="images/file.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/.htaccess" data-type="0">
<span class="filename">.htaccess</span>
</li>
<li>
<img src="images/file.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/config.php" data-type="0">
<span class="filename">config.php</span>
</li>
<li>
<img src="images/file.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/deex-cmf.php" data-type="0">
<span class="filename">deex-cmf.php</span>
</li>
</ul>
<ul id="sel-entries">
<li>
<img src="images/file.png" alt="">
<input type="hidden" class="fullname" value="/srv/www/dev/umid/index.php" data-type="0">
<span class="filename">index.php</span>
</li>
</ul>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery( document ).ready( function ( $ )
{
function sortEntries( list_container )
{
var lis = list_container.find( 'li' ), // get all <li>s from the container
lis_folders = lis.find( 'input.fullname[data-type=1]' ).parent( 'li' ),// get all <li>s which has <input> with class .fullname and data-type=1 (folders) attribute
lis_files = lis.find( 'input.fullname[data-type=0]' ).parent( 'li' ); // get all <li>s which has <input> with class .fullname and data-type=0 (files) attribute
lis_folders.sort( function ( a, b ) // sort folders
{
return $( a ) // get first <li>
.find( 'input.fullname' )// find <input> with class .fullname
.val() // get that <input> value
.localeCompare( // compare value with second <li>'s value
$( b ) // get second <li>
.find( 'input.fullname' )// find <input> with class .fullname
.val() // get that <input> value
);
} );
lis_files.sort( function ( a, b ) // sort files, same as above
{
return $( a )
.find( 'input.fullname' )
.val()
.localeCompare(
$( b )
.find( 'input.fullname' )
.val()
);
} );
lis = $.merge( lis_folders, lis_files ); // merge folders and files into one array
return lis; // return new sorted <li>s by type & name.
}
$( 'body' ).on( 'dblclick', '#sel-entries li', function ( __event )
{
$( this ) // get double clicked <li>
.detach() // detach it from ul#sel-entries
.appendTo( '#file-system' ); // attach it to ul#file-system
var lis = sortEntries( $( '#file-system' ) ); // sort entries (folders & files)
$( '#file-system' ) // get ul#file-system element
.empty() // clean its <li>s
.append( lis ); // append sorted <li>s
} );
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment