Не будет перебирать массив в jQuery

Question

Таким образом, я могу получить все нужные изображения в массив и передать их в $ image. Однако, когда я пытаюсь перебрать этот массив, он продолжает предупреждать один и тот же элемент три раза.

Код, с которым у меня проблемы.

   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();
 });

Answer 1

Вы неправильно используете цикл $ .each.

Ваша первая проблема заключается в том, что $ image.attr ("x") получит атрибут первого элемента в списке, если $ 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/

Answer 2

Полагаю, $image - это массив, поскольку вы перебираете его. если это так, вы хотите что-то похожее на это ...

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

Answer 3

Вы можете выполнить то, что хотите, используя map() ^{(документы)} .

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

Это создастновый объект jQuery, который содержит новые элементы <img>, затем будет appendTo() ^{(документы)} селектор 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);
},

Answer 4

проверьте мое решение на http://jsfiddle.net/h3az4/5/

, что позволяет бесконечный цикл вашего слайд-шоу, хотя, вы немного усложнили его и допустили несколько концептуальных ошибок, как указывал @ Dutchie432

надеждаэто тоже поможет, Том