原帖:
我有以下脚本，可以很好地序列化。
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"));
}
});
是否可以用 anchor 标签 url 和文本做类似的事情？
即类似的东西:
$(".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>
最佳答案
您可以使用 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 的特定问题进行编辑
我刚刚试过了，它适用于 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 选择从
$.map($("#listing a")... 到 $.map($("a", event.target)...。这样，您不必担心 id 在函数体中被重复。
关于javascript - jQuery 序列化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4324342/