从IMG元素的属性创建对象的阵列，和输出值，jquery的(Create an array of o

现在我有一个全屏插件与静态URL的工作，但我想，以取代那些带有动态图像数据，一个CMS输出到页面。

下面是从CMS输出的HTML的一个示例：

<ul class="large-gallery">

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl351.jpg" data-full-src="http://www.domain/imageurl361.jpg" alt="Image Title 4725">
</a>
</li>

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl354.jpg" data-full-src="http://www.domain/imageurl3721.jpg" alt="Image Title 73365">
</a>
</li>

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl356.jpg" data-full-src=v"http://www.domain/imageurl3567.jpg" alt="Image Title 4635">
</a>
</li>

</ul>

这里是JavaScript：

<script type="text/javascript">// <![CDATA[

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   5000,       // Length between transitions
                                    new_window              : 0,
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1200,       // Speed of transition

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images
{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1',  url : 'http://www.domain.com/manually-inputted-url-1'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2',  url : 'http://www.domain.com/manually-inputted-url-2'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3',  url : 'http://www.domain.com/manually-inputted-url-3'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4',  url : 'http://www.domain.com/manually-inputted-url-4'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5',  url : 'http://www.domain.com/manually-inputted-url-5'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6',  url : 'http://www.domain.com/manually-inputted-url-6'},                                             ]

            });
        });
// ]]></script>

我今天准备这样做。

我想，以取代在JavaScript的代码;

{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1',  url : 'http://www.domain.com/manually-inputted-url-1'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2',  url : 'http://www.domain.com/manually-inputted-url-2'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3',  url : 'http://www.domain.com/manually-inputted-url-3'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4',  url : 'http://www.domain.com/manually-inputted-url-4'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5',  url : 'http://www.domain.com/manually-inputted-url-5'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6',  url : 'http://www.domain.com/manually-inputted-url-6'},

是这样的：

for each bigImage, output this 
{ image : 'bigImage.imgUrl', title : ' bigImage.title ', url : ' bigImage.linkUrl '},

我在想创建对象的用于bigImages阵列，然后调用每个对象作为bigImage。但林真的不知道最好的方法，也是我很好奇如何格式化它有它的插件脚本内工作。

Answer 1:

你需要的是一个函数，IMG元素作为输入的集合，并返回所需的数组作为输出。

我可能会写是这样的：

var slidesArray = function() {

  var array = [];

  $("ul.large-gallery li img").each(function() {

    var arrayItem = { image: $(this).attr('src'), title: $(this).attr('alt'), url: $(this).parent('a').attr('href') };

    array.push(arrayItem);

  });

  return array;
}

然后你就可以在你的配置哈希说：

slides: slidesArray()

Answer 2:

var slds = [];

$('.large-gallery a').each(function(i,obj){
    var $this = $(obj),
        $thisImg = $this.find('img');
    slds.push({
        image: $thisImg .data('full-src'),
        title: $thisImg .prop('title'),
        url: $this.prop('href')
    })
});

然后，只需提供slds作为源幻灯片