jquery ui从儿童排序序列化

Question

我想在图像排序后发送带有图像路径和标题的数组到PHP脚本。 我可以在列表上做'serialize'或'toArray'，但是如何从img标签获取属性？

<ul class="gallery"> 
    <li id="li-1"> 
     <img src="tn/001.jpg" alt="first caption" /> 
    </li> 
    <li mycaption="some caption" id="li-2"> 
     <img src="tn/002.jpg" alt="second caption with éèçà international chars" /> 
    </li> 
</ul> 

$(".gallery").sortable({ 
    update : function() { 
     serial = $('.gallery').sortable('serialize'); 
     alert(serial); 
     /* $.ajax({ 
      url: "sort.php", 
      type: "post", 
      data: serial, 
      error: function() {alert("theres an error with AJAX");} 
     }); */ 
    } 
}); 

Answer 1

因此，这里是我会怎么序列化此，成对象有两个成员，src_arr和caption_arr：

var getPaths = function() { 
    var imgPaths = { 'src_arr': [], 'caption_arr': []}; 
    $('.gallery img').each(function(){ 
     imgPaths.src_arr.push($(this).attr('src')); 
     imgPaths.caption_arr.push($(this).attr('alt')); 
    }); 
    return imgPaths; 
}; 

所以我想与您的代码做到这一点：

$.ajax({ 
    url: "sort.php", 
    type: "POST", 
    dataType: 'html', 
    data: getPaths(), 
    success: function(data, textStatus, XMLHttpRequest) { 
     // you need to do something in here 
     $('#debug').html('<pre>' + data + '</pre>'); 
    }, 
    error: function() { 
     alert("theres an error with AJAX"); 
    } 
}); 

原始数据为print_r()/sort.php外观如下：

Array 
(
    [src] => Array 
     (
      [0] => tn/001.jpg 
      [1] => tn/002.jpg 
     ) 

    [caption] => Array 
     (
      [0] => first caption 
      [1] => second caption with éèçà international chars 
     ) 

)