Javascript 我需要按标题对引导网格行进行排序

我在Bootstrap3中使用网格创建了一个表，而不是表

这个网站是用来预订公共汽车的

表格HTML结构如下所示：

<div class="row">
    <div class="col-lg-3"><h3>Bus Company</h3></div>
    <div class="col-lg-3"><h3>Bus Features</h3></div>
    <div class="col-lg-3"><h3>Departure Time</h3></div>
    <div class="col-lg-3"><h3>Book Now</h3></div>
</div>

<div class="row busses">
    <div class="col-lg-3"><p>Bus Company One</p></div>
    <div class="col-lg-3"><p>Water, Toilet</p></div>
    <div class="col-lg-3"><p>6:45 pm</p></div>
    <div class="col-lg-3"><p>Book Now</p></div>
</div>

公共汽车公司
公交车功能
出发时间
现在预订

然后有一个循环，获取所有相关的搜索结果……其中一个迭代如下所示：

<div class="row">
    <div class="col-lg-3"><h3>Bus Company</h3></div>
    <div class="col-lg-3"><h3>Bus Features</h3></div>
    <div class="col-lg-3"><h3>Departure Time</h3></div>
    <div class="col-lg-3"><h3>Book Now</h3></div>
</div>

<div class="row busses">
    <div class="col-lg-3"><p>Bus Company One</p></div>
    <div class="col-lg-3"><p>Water, Toilet</p></div>
    <div class="col-lg-3"><p>6:45 pm</p></div>
    <div class="col-lg-3"><p>Book Now</p></div>
</div>

一号巴士公司

水、厕所

下午6:45

现在预订

这将对每个符合搜索条件的总线重复

我希望能够点击第一行中的任何标题，然后对结果进行相应排序…或者可能只是出发时间和公交公司（第1列和第3列）

我已经搜索了很多地方，理想情况下，我想要一个可以使用的javascript插件，但是我找到的所有东西似乎都需要使用实际的html

，我不想使用它

如果有人知道一个插件，它还需要能够按时间排序，如…看到下午2点比上午11点晚，如果你明白我的意思

提前谢谢

---

马特

这可以通过以下方式实现：

<div class="row">
    <div class="col-lg-3"><h3>Bus Company</h3></div>
    <div class="col-lg-3"><h3>Bus Features</h3></div>
    <div class="col-lg-3"><h3>Departure Time</h3></div>
    <div class="col-lg-3"><h3>Book Now</h3></div>
</div>

<div class="row busses">
    <div class="col-lg-3"><p>Bus Company One</p></div>
    <div class="col-lg-3"><p>Water, Toilet</p></div>
    <div class="col-lg-3"><p>6:45 pm</p></div>
    <div class="col-lg-3"><p>Book Now</p></div>
</div>

功能排序按钮（按基准，反向）{
变量总线=$（'.busses'）.detach（）.toArray（）；
总线=总线排序（功能（a，b）{
var aVal=$（a）.find（'[data target attr='+byDatum+']）.text（）；
var bVal=$（b）.find（'[data target attr='+byDatum+']）.text（）；
//看起来是相反的，因为我们在后面使用append，而不是prepend
var returnVal=bVal

公共汽车公司
公交车功能
出发时间
现在预订
公交一号公司
下午6:45

座椅
现在预订

第二巴士公司
下午7:45

水、厕所
现在预订

三号巴士公司
下午8:45

厕所
现在预订

谢谢你的回答……代码看起来很好，但我最终发现这个小脚本非常好地为我完成了所有事情……它的jQuery独立性也很好

如果您的任务是在引导上生产类似的产品，那么您很可能希望（如果不是的话，您应该）使其具有响应性，这样当您使用移动设备时，它会将这些列放在彼此下面。这比一般情况下生成行会导致更多问题，因为当你在移动视图上时，你必须使你的标题行与整个列表一起工作。是的…响应性是我想使用div而不是tables的原因，尽管在移动版本中标题完全不相似，所以出于这个目的…移动不必考虑。