Сделать код js со специальным форматом

Question

Я хочу получить date-type и date-title в div.Img и сделать его в следующем формате jQuery в конце, положив его в функцию jQuery, как это?

Это div.Img:

<div class="Img" date-type="http://fancyapps.com/fancybox/demo/1_b.jpg" date-title="manual 1st title"></div> 
<div class="Img" date-type="http://fancyapps.com/fancybox/demo/2_b.jpg" date-title="2nd title"></div> 
<div class="Img" date-type="http://fancyapps.com/fancybox/demo/3_b.jpg" date-title="3rd title"></div> 

Это my format: я хочу получить в результате, как fllowing из date-type появляются две и date-title в div.Img, с {} и ,.

{ 
     href : 'http://fancyapps.com/fancybox/demo/1_b.jpg', 
     title : 'manual 1st title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/2_b.jpg', 
     title : '2nd title' 
    }, 
    { 
     href : 'http://fancyapps.com/fancybox/demo/3_b.jpg', 
     title : '3rd title' 
    } 

Пожалуйста, дайте мне пример в jsfiddle.net

Answer 1

Пользовательский атрибут должен be data-* префикс не date-*

<div class="Img" data-type="http://fancyapps.com/fancybox/demo/1_b.jpg" data-title="manual 1st title">1</div> 

Тогда .map() может быть использован в сочетании с .data()

var arr = $('div.Img').map(function (elem) { 
    return { 
     href: $(this).data('type'), 
     title: $(this).data('title') 
    } 
}).get(); 

console.log(arr); 

Fiddle example

Answer 2

Вот рабочий пример фрагмент кода.

function getDivInfo($div) { 
 
    return { 
 
    "href": $div.attr("date-type"), 
 
    "title": $div.attr("date-title") 
 
    }; 
 
} 
 

 
$(function() { 
 
    var div_info = []; 
 
    
 
    $('div.Img').each(function() { 
 
    div_info.push(getDivInfo($(this))); 
 
    }); 
 
    
 
    console.log(div_info); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Img" date-type="http://fancyapps.com/fancybox/demo/1_b.jpg" date-title="manual 1st title"></div> 
 
<div class="Img" date-type="http://fancyapps.com/fancybox/demo/2_b.jpg" date-title="2nd title"></div> 
 
<div class="Img" date-type="http://fancyapps.com/fancybox/demo/3_b.jpg" date-title="3rd title"></div>

Пожалуйста, обратите внимание, что пользовательские атрибуты должны начинаться с data- и не date-.

Answer 3

Используйте .map() в JQuery.

в $ .map() метод применяет функцию к каждому элементу в массиве или объекта и отображает результаты в новый массив

var res = $(".Img").map(function() { 
    return {"href":$(this).attr('date-type'), 
      "title":$(this).attr('date-title') 
      } 
}).get(); 

console.log(res); 

Fiddle