jQuery Serialize?
ORIGINAL POST:
I have the following script which serializes nicely.
jQuery/Ajax generated 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"));
}
});
Is it possible to do a similar thing with the anchor tags url and text?
i.e. something along the lines of:
$(".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
}
});
UPDATED POST 1:
The following return "undefined" for 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>
UPDATED POST 2:
The following works, but is it the best way to go about doing this?
<!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 = "";
va开发者_Python百科r 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>
You can use the map function to change an array of results to another. Then join it with the '&' and voila!
$.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("&");
It's working, but you may want to keep the $(".my_list a") array to reuse it in next calls (even though it shouldn't be too expensive to get the list)
edit to add: you can in fact do lots of interesting things with the map function. Return an array of data objects built from your links data?
$.map(
$(".my_list a")
, function(elt, index) {
return {anchor: elt.href, text: elt.text };
});
or an array of arrays
$.map(
$(".my_list a")
, function(elt, index) {
return [[elt.href, elt.text]];
});
So, basically, i think map is highly recommended in your case :)
edit for IE8 specific problem
I just tried this, and it works on 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>
you can try with $(this).text() or $(elt).html() (the first one should be better), i had it work on both browsers. I'm not fluent with the development tools for IE8 so i'd recommend you find documentation to read about determining the properties of an object.
W3Schools doesnt give a text attribute for the a tag, i should have checked that first...
<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>
The last edit, just to make things "perfect"
to reuse the method, for another list, change the map selection from
$.map($("#listing a")... to $.map($("a", event.target).... This way, you doin't have to worry about the id being repeated in the function body.
I don't know how you could do this with the sortable plugin but why not do it yourself, something like this:
var serialized = "";
$('.my_list li a').each(function(index)
{
serialized+= "anchorurl_" + index + "=" + $(this).attr("href")
});
加载中,请稍侯......
精彩评论