从 img 元素属性和输出值、jquery 创建一个对象数组答案

【问题标题】：Create an array of objects from img element attributes, and output values, jquery从 img 元素属性和输出值、jquery 创建一个对象数组
【发布时间】：2013-04-29 19:13:46
【问题描述】：

现在我有一个使用静态 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。但我不太确定最好的方法，而且我很好奇如何格式化它以使其在插件脚本中工作。

【问题讨论】：

好吧，您似乎对所涉及的概念有很深的理解。您具体需要什么帮助？是否将您提供的 HTML 转换为对象数组？
我想把 html 变成一个对象数组，其中包含 imageUrl、title、linkUrl 的属性。然后执行每个循环以在插件中创建。似乎对象创建和输出应该是非常基本的，但我一直在搜索和搜索一个简单的示例来遵循，但我找不到。然后我需要帮助找出将它放在插件代码中的什么位置。
你被什么困住了？迭代 HTML 并推断必要的数据？
stackoverflow.com/questions/14338948/… 这是我见过的最接近的。创建对象。

标签： jquery arrays object supersized

【解决方案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()

【讨论】：

Ohgodwhy 通常有相同的想法，但是，我更喜欢我的 b/c 它可以显式执行，而不是在文档准备好时预填充。我认为他对 jQuery 查找器和 prop/data 函数的使用在语法上更正确，尽管到目前为止它对功能没有影响。
我应该在 $.supersized 函数之前还是在其中包含代码？
确实如此。出于代码的目的，.attr() 应替换为 .prop()。无论哪种方式 +1，都不是什么大不了的事。
@DillHoffman — 之前。然后从当前手动列出数组的 $.supersized 内部调用 slidesArray()。

【解决方案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 作为幻灯片的来源

slides: slds

【讨论】：

请，please 用这种方法至少缓存$(obj)；也可能是$(obj).find('img')。