Форум

Янковиц · #1 (**permalink**) 21.07.2018, 11:40

Добрый день. Есть верстка:

<div class="google-map-marks">
	<div class="google-map-center"><span class="latitude">57.71626291400055</span><span class="longitude">43.94435294999994</span></div>
	<div class="marker"><span class="latitude">60.207426504475734</span><span class="longitude">35.94630607499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">60.81312576191666</span><span class="longitude">61.43458732499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">45.660621650435466</span><span class="longitude">52.64552482499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">45.537632112877695</span><span class="longitude">79.01271232499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">57.196191095006554</span><span class="longitude">79.36427482499994</span><span class="delet"></span></div>
</div>

Нужно на jQuery собрать данные со всех элементов и создать json строку:

"contents": [
    {
      "id": 1,
      "lat": 57.71626291400055,
      "lng": 43.94435294999994
    },
    {
      "id": 2,
      "lat": 60.207426504475734,
      "lng": 35.94630607499994
    }
  ],

Янковиц · #2 (**permalink**) 21.07.2018, 12:07

Разобрался:

var _this = $(this),
			menu = {},
			i = 0;
		_this.parent().prev().children('div').each(function (i) {
			menu["mark" + i++] = {
				lat: $(this).children('.latitude').html(),
				lng: $(this).children('.longitude').html()
			};
		});
		var json = '['+JSON.stringify(menu)+']';

laimas · #3 (**permalink**) 21.07.2018, 12:53

var jsn = JSON.stringify($.map($('div.google-map-marks div'), function(e, i) {
    e = e.childNodes;
    return {id: ++i, latitude: e[0].textContent, longitude: e[1].textContent}
}))

console.log(jsn )

рони · #4 (**permalink**) 21.07.2018, 15:34

Янковиц,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   span{
       margin: 5px;
   }

  </style>

</head>

<body>
<div class="google-map-marks">
	<div class="google-map-center"><span class="latitude">57.71626291400055</span><span class="longitude">43.94435294999994</span></div>
	<div class="marker"><span class="latitude">60.207426504475734</span><span class="longitude">35.94630607499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">60.81312576191666</span><span class="longitude">61.43458732499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">45.660621650435466</span><span class="longitude">52.64552482499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">45.537632112877695</span><span class="longitude">79.01271232499994</span><span class="delet"></span></div>
	<div class="marker"><span class="latitude">57.196191095006554</span><span class="longitude">79.36427482499994</span><span class="delet"></span></div>
</div>
<script>

  var spn = document.querySelectorAll('.latitude,.longitude');
  var obj = {};
  var arr = [].reduce.call(spn, function(a,b,i) {
  i % 2 ? (obj.lng = b.textContent,obj = {}):(a.push(obj),obj.id = a.length,obj.lat = b.textContent )
  return a
  }, []);
  document.write('<br>'+JSON.stringify(arr, null, 4))
  </script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript