Sorting DIV's by specific content using jQuery

Hi I have below markup structure. I just grabbed one column from the entire table.

What I'm trying to do here is that within td with "mon" class, all other

tags would be hidden other than "monTime" class (which would be done by CSS). Then all "staffBox" div should be re-sorted according to value in p tag with "monTime" class

So in below example, the order should be Vanessa, Adele then Zoe (naturally sorted by their starting time in "monTime" )

I don't mind if I need to change class name structure or whatsoever

<td class="mon">

<div class="staffBox">
<h4><a href="">Adele</a></h4>
<p class="monTime">7AM - 7AM</p>
<p class="tueTime">7AM - 6AM</p>
<p class="wedTime">12AM - 5AM</p>
<p class="thuTime">8AM - 12AM</p>
<p class="friTime">6AM - 12AM</p>
<p class="satTime">12AM - 10AM</p>
<p class="sunTime">12AM - 9AM</p>
</div>
<div class="staffBox">
<h4><a href="">Zoe</a></h4>
<p class="monTime">1PM - 6PM</p>
<p class="tueTime"> - </p>
<p class="wedTime"> - </p>
<p class="thuTime"> - </p>
<p class="friTime"> - </p>
<p class="sat开发者_StackOverflow社区Time"> - </p>
<p class="sunTime"> - </p>
</div>
<div class="staffBox">
<h4><a href="">Vanessa</a></h4>
<p class="monTime">3AM - 6AM</p>
<p class="tueTime"> - </p>
<p class="wedTime"> - </p>
<p class="thuTime"> - </p>
<p class="friTime"> - </p>
<p class="satTime"> - </p>
<p class="sunTime"> - </p>
</div>

</td>

Have a look at the jQuery tablesorter plugin, it's what I always use for sorting.