Question

原始帖子：

我有以下脚本很好地序列化。

jQuery / Ajax生成HTML

<ul class="my_list">
    <li class="list_item_1"><a href="link1.html">link1</a></li>
    <li class="list_item_2"><a href="link2.html">link2</a></li>
    <li class="list_item_3"><a href="link3.html">link3</a></li>
    <li class="list_item_4"><a href="link4.html">link4</a></li>
    <li class="list_item_5"><a href="link5.html">link5</a></li>
</ul>

jQuery的：

$(".my_list").sortable(
    {update:function(){
         alert($(this).sortable("serialize"));
    }
});

是否可以使用锚标记网址和文字进行类似的操作？

即。类似的东西：

$(".my_list").sortable(
    {update:function(){
         alert($(this).sortable("serialize"));
         alert($("detect_anchor_tag_in_li").serialize_url)); // anchorurl_1=link1.html&anchorurl_2=link2.html and so on
         alert($("detect_anchor_tag_in_li").serialize_text)); // anchortext_1=link1&anchor_2=link2 and so on
    }
});

更新后的帖子1：

以下为elt.text返回“undefined”。

    <script>
        $( document ).ready( function() { 
            $(".my_list").sortable(
                {axis:"y"},
                {update:function(){ 
                    alert($(this).sortable("serialize",{key:'widget_id'}));

                    $.map($(".my_list a"), function(elt, index) { 
                        alert("url=" + elt.href + " txt=" + elt.text); 
                    }); 
                }
            });
        });
    </script>

更新后的帖子2：

以下是有效的，但这是最好的方法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>sortable basic</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        <script>
            $( document ).ready( function() { 
                var urls = ""; 
                var texts = ""; 

                $("#mylist").sortable(
                    {axis: "y"},
                    {update:function(){ 
                        $.map($("#mylist a"), function(elt) { 
                            urls += "url=" + elt.href + "&";
                            texts += "text=" + $(elt).html() + "&"; 
                        }); 

                        alert($(this).sortable("serialize",{key:'item'}));
                        alert(urls.substr(0,urls.length - 1));
                        alert(texts.substr(0,texts.length - 1));
                    }
                });
            });
        </script>
    </head>

    <body>
        <ul id="mylist">
            <li id="item_4"><a href="http://www.google.com">google</a></li>
            <li id="item_9"><a href="http://www.yahoo.com">yahoo</a></li>
            <li id="item_2"><a href="http://www.bing.com">bing</a></li>
            <li id="item_5"><a href="http://www.youtube.com">youtube</a></li>
            <li id="item_8"><a href="http://www.ebay.com">ebay</a></li>
        </ul>
    </body>
</html>

Answer 1

您可以使用map功能将结果数组更改为另一个。然后加入'＆amp;'瞧！

$.map(
    $(".my_list a")
    , function(elt, index) {
        return "anchorurl_" + index + "=" + elt.href
    }).join("&");

 $.map(
    $(".my_list a")
    , function(elt, index) {
        return "anchortext_" + index + "=" + elt.text
    }).join("&");

它正在运行，但您可能希望保留$（“。my_list a”）数组以在下次调用中重用它（即使它不应该太昂贵而无法获取列表）

编辑添加：事实上，你可以使用map函数做很多有趣的事情。返回从链接数据构建的数据对象数组？

$.map(
        $(".my_list a")
        , function(elt, index) {
            return {anchor: elt.href, text: elt.text };
        });

或数组数组

$.map(
        $(".my_list a")
        , function(elt, index) {
            return [[elt.href, elt.text]];
        });

所以，基本上，我认为在你的情况下强烈推荐地图：）

编辑IE8特定问题

我刚试过这个，它适用于firefox 3.6

<ul id="listing">
    <li class="list_item_1"><a href="link1.html">link1</a></li>
    <li class="list_item_2"><a href="link2.html">link2</a></li>
    <li class="list_item_3"><a href="link3.html">link3</a></li>
    <li class="list_item_4"><a href="link4.html">link4</a></li>
    <li class="list_item_5"><a href="link5.html">link5</a></li>
</ul>

   <script type="text/javascript">
       $(document).ready(function() {
       $("#listing").sortable(
            { update: function(event, ui) {
                $.map($("#listing a"), function(elt, index) {
                                   alert("url=" + elt.href + " txt=" + elt.text);
                               });
            }});
       });
   </script>

您可以尝试使用$(this).text()或$(elt).html()（第一个应该更好），我可以在两个浏览器上使用它。我不熟悉IE8的开发工具，所以我建议你找一些关于确定对象属性的文档。 W3Schools没有为a标签提供文本属性，我应该先检查一下......

<script type="text/javascript">
       $(document).ready(function() {
       $("#listing").sortable(
            { update: function(event, ui) {
                $.map($("#listing a"), function(elt, index) {
                    alert("url=" + elt.href + " txt=" + $(elt).text());
                });
            }});
       });
   </script>

最后一次编辑，只是为了让事情变得“完美” 要重用该方法，请从另一个列表中更改地图选择 $.map($("#listing a")...到$.map($("a", event.target)...。这样，你不必担心在函数体中重复id。

Answer 2

我不知道你怎么能用可排序的插件做到这一点，但为什么不自己做，像这样：

var serialized = "";

$('.my_list li a').each(function(index)
{
    serialized+= "anchorurl_" + index + "=" + $(this).attr("href")
});

jQuery Serialize？

原始帖子：

更新后的帖子1：

更新后的帖子2：

2 个答案: