我有一个带有 li 标签的无序列表。每个 li 依次包含其他标签和文本。代码如下:
<input type="button" value="A-Z" class="sortNameAsc" />
<ul id="sortable">
@foreach (var item in Model)
{
<li><article>
<ul class="listItemLinks">
<li class="firstListItemLink"><a href="#" onclick="MoveItem(this.parentNode.parentNode.parentNode.parentNode)">
<img src="@Url.Content("~/Content/icons/UpArrow.png")" alt="Move Up" title="Move Up" />
</a></li>
<li>@Html.ActionImage("Edit", "Todo", new { id = item.ListItemID }, "~/Content/icons/edit.png", "Edit note")</li>
<li>@Html.ActionImage("Delete", "Todo", new { id = item.ListItemID }, "~/Content/icons/delete.png", "Permanently remove note")</li>
@{if (item.Finished)
{
<li>
@Html.ActionImage("Finish", new { id = item.ListItemID }, "~/Content/icons/reopen.png", "Reopen note")
</li>
}
else
{
<li>
@Html.ActionImage("Finish", new { id = item.ListItemID }, "~/Content/icons/complete.png", "Complete note")
</li>
}
}
<li><span title="@item.DueDate.ToLongDateString()">@item.DueDate.ToShortDateString()</span></li>
</ul>
<p class="listItem" title="@item.Content">
@{if (item.Finished)
{@:<del>
@Html.Truncate(item.Content, 190)
@:</del>
}
else
{
@Html.Truncate(item.Content, 190)
}
}
</p>
</article></li>
}
</ul>
我想根据<p class="listItem" title="@item.Content">
和(如果可能的话<li><span title="@item.DueDate.ToLongDateString()">@item.DueDate.ToShortDateString()</span></li>
)使用 jquery/javascript 对(内容和日期)进行排序。
我编写了一个对列表进行排序的小函数,但只有排序后的文本保留在列表(<p class="listItem" .../>
)中,如 html。的其他元素<li>s
被删除(listItemLinks)。
我的排序脚本是(对javascript/jquery知之甚少):
<script type="text/javascript">
$(document).ready(function () {
$(".sortNameAsc").click(function (evt) {
$('body #sortable').html($('#sortable li article .listItem').sort(function (a, b) {
return ($(b).text()) < ($(a).text());
}));
});
});
</script>
有人可以提供一些帮助,根据内容和日期对列表进行排序,同时保留列表项文本和其他内容吗?