使用 jquery 从图像列表中创建数组答案

【问题标题】：make array from a list of images with jquery使用 jquery 从图像列表中创建数组
【发布时间】：2011-02-09 19:01:02
【问题描述】：

我有一张这样的照片列表：

<div class="upimage">
    <ul id="upimagesQueue" class="thumbs ui-sortable">
    <li id="upimagesKHGYUD">
        <a href="uploads/0002.jpg">
            <img src="uploads/0002.jpg" id="KHGYUD">
        </a>
    </li>
    <li id="upimagesNCEEKI">
        <a href="uploads/0003.jpg">
            <img src="uploads/0003.jpg" id="NCEEKI">
        </a>
    </li>
    <li id="upimagesPWSHUN">
        <a href="uploads/0003.jpg">
            <img src="uploads/0003.jpg" id="PWSHUN">
        </a>
    </li>
    <li id="upimagesOYJAQV">
        <a href="uploads/0004.jpg">
            <img src="uploads/0004.jpg" id="OYJAQV">
        </a>
    </li>
    </ul>
</div>

我也想在 jquery 中创建一个函数，将所有图像放入 1 个数组中，以便能够将数组发送到 php！我想采用这种形式的数组：

array(
    'image_id_1' => array(
        'image_src_1' => 'xyz.jpg',
    )
    'image_id_2' => array(
        'image_src_2' => 'xyz.jpg',
    )
    'image_id_3' => array(
        'image_src_3' => 'xyz.jpg',
    )
    'image_id_4' => array(
        'image_src_4' => 'xyz.jpg',
    )
)

我如何编码？谢谢

【问题讨论】：

标签： php jquery image arrays

【解决方案1】：

更新

演示： hhttp://jsbin.com/idovi3/6

从你问的 jQUERY PLUGIN 是 ;-)

(function($) {

    $.fn.serializeImages = function() {
       //create the array...
       var toReturn    = [];
       //get the LI
       var els = $(this);
       //loop trought each LI ...
        $.each(els, function(i) {
         //get the Li id...
        var id = $(this).children().children().attr('id');
         //get the img src of the parent A parent IMG...
        var val = $(this).children().children().attr('src').split('uploads/')[1];
         //put each item in the array...
        toReturn.push( 
         // format the array...         
        id + ' => array( "image_src_' + i + '"' + ' => ' + val  + ', )'

            );           
        });   
        //join all into one single var for easy access.. 
        // \n can be whatever you want      
        var array =  toReturn.join('\n');

        return array; 
    }

})(jQuery);

  $(function () {
    var serie = $('ul li').serializeImages();
    alert(serie); 
  });

回声：

KHGYUD => array( "image_src_0" => 0002.jpg, )
NCEEKI => array( "image_src_1" => 0003.jpg, )
PWSHUN => array( "image_src_2" => 0003.jpg, )
OYJAQV => array( "image_src_3" => 0004.jpg, )

【讨论】：

不错！但我怎么能收到身份证呢？我添加“var id = $(this).attr('id');”但不工作
我添加了“var id = $(this).children().children().attr('id');”获取图片ID！

【解决方案2】：

var a = {};
$(".upimage img").each(function() {
  a[this.id] = $(this).attr("src");
});

会给你

a = {
  "KHGYUD": "uploads/0002.jpg",
  "NCEEKI": "uploads/0003.jpg",
  "PWSHUN": "uploads/0003.jpg",
  "OYJAQV": "uploads/0004.jpg"
};

不知道你为什么想要一个多维数组。

【讨论】：

因为 upimage 是 div 的类，它应该是 $(".upimage img")... 或 $("#upimagesQueue img")...
我需要添加更多数据，这就是我需要多维数组的原因。
@robertdd：请制作一个更有用的输出示例。你的甚至没有反映你的意见。另外不要忘记包含嵌套数组实际上有意义的情况。
@robertdd：反应灵敏实际上是一件好事。你应该试试看。 ;)

【解决方案3】：

var images = {};
$('.upimage li').each(function(){
  var $img   = $(this).find('img'),
      imgObj = {};

  imgObj[$img.attr('src')] = $img.attr('id');
  images[$(this).attr('id')] = imgObj;
});

// Then to send to php
$.post('url', images, function(){ /* success */ });

（好像你有两次图像 src，所以我只是假设你的意思是 li id 先是图像 src，不管怎样，这是一个小的变化）

【讨论】：