0

我有一个带有 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>

有人可以提供一些帮助，根据内容和日期对列表进行排序，同时保留列表项文本和其他内容吗？

4

0 回答 0