Как получить идентификатор изображения в массив jquery?

Question

Im пытается получить все идентификаторы id из списка изображений в div в массив jquery. Это HTML:

<div id = "tdgallerys"> 
    <img id2="/uploads/ssp/album_2/image_10.jpg" 
     id3="Pic1" id4="1" 
     src="/uploads/ssp/album_2/thumbnails/image_10.jpg" 
     rel="scrollers"/>     
    <img id2="/uploads/ssp/album_2/image_11.jpg" 
     id3="Pic2" id4="2" 
     src="/uploads/ssp/album_2/thumbnails/image_11.jpg" 
     rel="scrollers"/>     
    <img id2="/uploads/ssp/album_2/image_12.jpg" 
     id3="Pic3" id4="3" 
     src="/uploads/ssp/album_2/thumbnails/image_12.jpg" 
     rel="scrollers"/>     
</div> 

Это то, что я пытаюсь:

$(document).ready(function() {  
     var images = new Array(); 
     var count = 0; 
     var id = 0; 

     $("[rel='scrollers']").click(function (event) {    
      var dvImages = $('#tdgallerys img').attr('id4'); 
      $.each(dvImages , function (i) { 
       images.push(dvImages); 
       alert(dvImages); 
      }); 
      var desc = $(this).attr('id3'); 
     }); 

    }); 

Я поставил массив за пределами функции мыши, потому что мне нужно, чтобы получить доступ к массиву из другого щелчка функции позже

$("#next").click(function (event) { 
      id = id++; 
      alert(images[id]); 
     }); 

Answer 1

Вам нужно перебрать коллекцию изображения, а затем вставьте атрибут id4 в массив.

$(document).ready(function() {  
    var images = []; 
    var count = 0; 
    var id = 0; 

    $("[rel='scrollers']").click(function (event) {    
     var dvImages = $('#tdgallerys img'); 
     $.each(dvImages, function(i) { 
      images.push($(this).attr("id4")); 
     }); 
     var desc = $(this).attr('id3'); 
    }); 
}); 

Example fiddle

Стоит отметить, однако, что создавать свои собственные атрибуты, такие как id2, id3 и id4 является недействительным, и будет означать, ваша страница не будет проверять. Вместо этого посмотрите на использование атрибута data в HTML5.

Answer 2

Try:

$.each($('#tdgallerys img') , function (i) { 
    var id4 = $(this).attr('id4'); 
    images.push(id4); 
}); 

Рабочий пример здесь ->http://jsfiddle.net/PbBxV/1/

Вы действительно должны использовать функцию data() в JQuery для хранения клиента атрибутов DOM элементов

Answer 3

Try:

$(document).ready(function() {  
     var images = new Array(); 
     var count = 0; 
     var id = 0; 

     $("[rel='scrollers']").click(function (event) {    
      var dvImages = $('#tdgallerys img'); // collection of images 
      $.each(dvImages , function (i) { 
       images.push(i.attr("id4")); // for each image push value of id4 
       alert(i.attr("id4")); 
      }); 

     }); 

    }); 

Answer 4

Вы выбираете атрибут раньше. Вам нужно перебрать набор изображений, выбранных с помощью $("#tdgallerys img"), а затем получить атрибут для каждого изображения в этом наборе.

Попробуйте вместо этого:

var dvImages = $('#tdgallerys img'); 
$.each(dvImages , function (i) { 
    images.push($(this).attr("id4")); 
}); 

Answer 5

Вы можете использовать .map пройти через каждый элемент и получить то, что вы после (атр ID4 в данном случае):

var dvImages = $('#tdgallerys img').map(function(){ 
    return $(this).attr('id4'); 
}); 

пример: http://jsfiddle.net/xs4h4/