Javascript jQuery序列化？原职：_Javascript_Html_Jquery Ui_Jquery

Javascript jQuery序列化？原职：

javascript html jquery-ui jquery

Javascript jQuery序列化？原职：,javascript,html,jquery-ui,jquery,Javascript,Html,Jquery Ui,Jquery,我有下面的脚本，可以很好地序列化 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

我有下面的脚本，可以很好地序列化

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>

是否可以对锚定标记url和文本执行类似的操作

i、 e.大致如下：

$(".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的“未定义”

    <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>


$（文档）.ready（函数（）{
$（“.my_list”）。可排序(
{轴：“y”}，
{update:function（）{
警报（$（this）.sortable（“序列化”，{key:'widget_id}））；
$.map（$（“.my_list a”），函数（elt，index）{
警报（“url=“+elt.href+”txt=“+elt.text”）；
}); 
}
});
});

更新帖子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>


可排序基本
$（文档）.ready（函数（）{
var url=“”；
var text=“”；
$（“#mylist”）。可排序(
{轴：“y”}，
{update:function（）{
$.map（$（“#mylist a”），函数（elt）{
url+=“url=“+elt.href+”&”；
text+=“text=“++$（elt）.html（）+”&”；
}); 
警报（$（this）.sortable（“序列化”，{key:'item'}））；
警报（url.substr（0，url.length-1））；
警报（text.substr（0，text.length-1））；
}
});
});

我不知道如何使用可排序插件实现这一点，但为什么不自己实现呢，比如：

var serialized = "";

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

您可以使用

map

功能将结果数组更改为另一个。然后加入“&”和“瞧

$.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]];
        });

因此，基本上，我认为map在您的案例中是被高度推荐的：）

针对IE8特定问题进行编辑

我刚刚试过这个，它在Firefox3.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>

最后一次编辑，只是为了让事情“完美” 若要重用该方法，请将地图选择从更改为另一个列表

$.map（$（“#清单a”）…

到

$.map（$（$”，事件.target）…

。这样，您就不必担心id在函数体中被重复。

嗨，是序列化还是锚定检测的问题？两者都有，但我想最好的起点是检测特定ul标记中的锚定标记。明天我将首先尝试一下。我想我做得不对，因为我可以我没有让它返回锚标记的文本。我已经更新了原始帖子，向您展示了我当前拥有的内容。您使用的是id哈希而不是类选择器，这是故意的吗？如果您在firefox上使用firebug，请使用控制台确保选择器正确。或者，使用“调试器”在javascript中设置断点语句并观察elt isi在internet explorer 8上有什么。我在哪里输入调试器语句？修复了id散列，这是一个输入错误。我刚刚在Firefox 4.0、Chromium 9.0、Opera 11中试用过，并且对所有这些都有效。但是，同一页面在internet explorer 8上无法工作。不幸的是，我需要它才能在internet explorer 8上工作re比其他浏览器都好。elt.txt在ie8上似乎没有定义。这个方法比samy发布的方法好吗？如果是，请告诉我原因。谢谢。我想我做错了什么，请查看我上面更新的问题。谢谢。那么我如何使用这个方法来获取锚定标记的文本？

<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>

<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>