Question

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

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

对其li包含除简单文本之外的其他标签的ul进

0 个答案: