用于更新隐藏输入的可排序列表答案

【问题标题】：Sortable list to update hidden input用于更新隐藏输入的可排序列表
【发布时间】：2011-10-28 21:27:55
【问题描述】：

我有一个可以使用 jQuery 排序的无序列表。排序函数工作正常，如下所示。每个列表项都有一个这种格式的 id-id="post_#"，其中 # 是唯一的数字。我需要在排序后使用列表项的顺序更新隐藏的输入值，但只有#。因此，如果项目的顺序是 > post_3, post_2, post_4, post_1

这是我目前拥有的 jQuery-

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery(function() {
            jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
                var order = $(this).sortable;

            }
            });
        });
    });
    </script>

还有 HTML-

<div id="wpbody-content">
<ul id="post_sortable_list">
<li id="post_1">foo</li>
<li id="post_2">bar</li>
<li id="post_3">hello</li>
<li id="post_4">world</li>
</ul></div>

<input type="hidden" name="posts_order" value="" />

【问题讨论】：

只需执行var order = $(this).sortable("serialize"); 将返回一个数组，其中 id 为 post，结果为 3,2,4,1 :)

标签： javascript jquery jquery-ui-sortable hidden-field

【解决方案1】：

你可以做类似的事情

var order = '';
 $('#post_sortable_list').find('li').each( function () {
  order = order + $(this).text().substring(5);
});
$('posts_order').val(order);

可能我离基地很远

【讨论】：

【解决方案2】：

<script type="text/javascript">
    jQuery(document).ready(function(){ 
        jQuery(function() {
            jQuery("#wpbody-content #post_sortable_list").sortable({ opacity: 0.6, cursor: \'move\', update: function() {
                var order = $(this).map(function(i, e){
                    return $(e).attr("id").substring(5);
                }.join(", ");

            }
            });
        });
    });
    </script>

尝试使用 map 获取所有 Id，然后将它们连接成一个字符串。

【讨论】：