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">
jquery/javascriptを使用して、このリストを(可能であれば)<li><span title="@item.DueDate.ToLongDateString()">@item.DueDate.ToShortDateString()</span></li>
(コンテンツと日付)に基づいてソートしたいと思います。
リストを並べ替える小さな関数を作成しましたが、並べ替えられたテキストのみがリスト ( <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>
コンテンツと日付に基づいてリストをソートし、リスト項目のテキストとその他のコンテンツの両方を保持する方法について、誰か助けていただけませんか?