不会在 jQuery 中遍历数组答案

【问题标题】：Won't Iterate Over Array In jQuery不会在 jQuery 中遍历数组
【发布时间】：2011-06-15 11:21:00
【问题描述】：

所以我可以将所有我想要的图像放入一个数组并将它们传递给 $image。但是，当我尝试遍历该数组时，它只会不断提醒同一个项目 3 次。

我遇到问题的代码。

   getItem : function($image){
    console.log($image)
    console.log(jQuery.type($image))
    var setup ='<img src="' + $($image).attr('href') + '" title="' +    $($image).attr('title') + '"/>';

    $.each($image, function(i){
        alert( setup);
    });

 }

HTML

    <a href="images/slideshow/1-GW.PhillipBarnhart.ReverendMemory.jpg" title="Phillip Barnhart as: 
        Reverend Memory - a clergyman who stands for decorum and truth." rel="slideshow"><img src="images/view-slideshow.jpg" width="490" height="352" alt="View Slideshow"></a>
        <a rel="slideshow" href="images/slideshow/2-GW.BethBrooks.POLLYTODD.jpg">fff</a>
        <a rel="slideshow" href="images/slideshow/3-GW.NickHale.NOSTALGIA.jpg">test</a>

整个脚本或者如果你喜欢 jsFiddle 这里是一个链接。 http://jsfiddle.net/h3az4/

var slideShow = {
config : {
    wrapper : 'body',
    container : 'div',
    anchor : 'a[rel="slideshow"]'
},

init : function(config) {
    $.extend(slideShow.config, config);
    $(slideShow.config.anchor).hide();
    $(slideShow.config.wrapper).find(slideShow.config.anchor)
        .eq(0)
        .show()
        .click(function(e){
            e.preventDefault();
            slideShow.getItem($(slideShow.config.anchor));
        });
},

getItem : function($image){
    console.log($image)
    console.log(jQuery.type($image))
    var setup ='<img src="' + $($image).attr('href') + '" title="' + $($image).attr('title') + '"/>';

    $.each($image, function(i){
        alert( setup);
    });


},

createTumbnail : function($image){

}

};


$(document).ready(function() {
slideShow.init();
 });

【问题讨论】：

我认为您的var setup 需要在$.each 循环中声明。

标签： javascript jquery iterator

【解决方案1】：

您使用 $.each 循环错误。

您的第一个问题是 $image.attr("x") 将获取列表中第一个元素的 attr 如果 $image 是一个列表。您想要的是 $($image[i]) 或使用 .get

第二个问题是在循环外声明var setup。这意味着它声明和使用一次而不是 3 次（因为你有 3 个项目）。

$.each($image, function(i){
    var setup ='<img src="' + $(this).attr('href') + '" title="' +       
        $(this).attr('title') + '"/>';
    alert( setup);
});

当您使用$.each 时，函数中的this 对象将依次引用数组中的每个对象。在这种情况下，this 是一个 DOM 对象，因此您想使用 $(this) 来获取 jQuery 图像对象。

在这里查看一个工作示例http://jsfiddle.net/Raynos/h3az4/3/

【讨论】：

【解决方案2】：

我假设$image 是一个数组，因为您正在循环遍历它。如果是这样的话，你想要类似的东西......

$.each($image, function(i){
    var setup ='<img src="' + i.attr('href') + '" title="' +  i.attr('title') + '"/>';
    alert( setup);
});

【讨论】：

【解决方案3】：

在http://jsfiddle.net/h3az4/5/查看我的解决方案

允许你的幻灯片无限循环，我觉得你有点过于复杂了，并且像@Dutchie432 指出的那样犯了一些概念错误

希望这也会有所帮助，汤姆

【讨论】：

【解决方案4】：

您可以使用map()^(docs) 完成您想要的。

getItem : function($image){
    $image.map( function(i,val){
        return $('<img src="' + this.href + '" title="' +this.title + '"/>')[0];
    }).appendTo(slideShow.config.wrapper);
},

这将创建一个包含新 <img> 元素的新 jQuery 对象，然后将 appendTo()^(docs) slideShow.config.wrapper 选择器。

不需要中间的setup 变量。

或者使用属性对象参数可能会更好一点：

getItem : function($image){
    $image.map( function(i,val){
        return $('<img>', { src:this.href, title:this.title })[0];
    }).appendTo(slideShow.config.wrapper);
},

【讨论】：