Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  a { display: block; text-decoration: none }
  .wrap { display: block; padding-left: 20px; background: red; }
</style>
</head>
<body>
<div class="list">
  <a href="#">Messi&nbsp;#<span>91</span>, </a>
  <a href="#">Pessi&nbsp;#<span>91</span>, </a>
  <a href="#">Aessi&nbsp;#<span>91</span>, </a>
  <a href="#">Tessi&nbsp;#<span>91</span>, </a>
  <a href="#">Kessi&nbsp;#<span>91</span>, </a>
  <a href="#">Bessi&nbsp;#<span>91</span>, </a>
  <a href="#">Vessi&nbsp;#<span>91</span>, </a>
  <a href="#">Jessi&nbsp;#<span>91</span>, </a>
  <a href="#">Dessi&nbsp;#<span>91</span>, </a>
  <a href="#">Nessi&nbsp;#<span>91</span>, </a>
  <a href="#">Zessi&nbsp;#<span>91</span>, </a>
  <em>Click me, honey</em>
</div>
</body>
</html>
 
function alphabetically(a, b) {
    return a.innerHTML > b.innerHTML ? 1 : -1;
}
​
$('em').click(function() {
  var a_list = $('.list');
  var a_items = $('a', a_list);
  
  a_items.sort(alphabetically);
  
  
  var wrapped = a_items.filter(':gt(3)');
  wrapped.html(wrapped.wrapAll('<span class="wrap"></span>'));
​
​
  a_list.html(a_items);
  
 
 
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers