Клуб API Карт

Клуб API Карт

Подскажите как поделить список адресов в выводе

Пост в архиве.
Приветствую вас уважаемые разработчики!
Не поможете ли разобраться с задачкой...
Имею такой код, (код приведен ниже), подскажите пожалуйста каким образом можно разделить список на несколько, чтобы предположим в выводе <ul id="mapMenu"></ul> выводилось две станции метро в <ul id="mapMenu2"></ul> предположим все остальные, сколько не бился ничего не получается...
Код используется совместно со скриптом accordion, и в разные <div></div> мне необходимо указать по несколько станций метро из общего списка, или может каким либо образом разделить сам список.
Заранее примного благодарен! 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="WINDOWS-1251" />
<title>jQuery UI Accordion - Default functionality</title>
<link type="text/css" href="jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />
    <script type="text/javascript">
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
                destinations = {
                    'ст. м. "Автозаводская"' : new YMaps.GeoPoint(37.660329,55.717075),
                    'ст. м. "Парк Культуры"' : new YMaps.GeoPoint(37.58556, 55.741052),
'ст. м. "Смоленская"' : new YMaps.GeoPoint(37.583081, 55.747451),
                    'ст. м. "Курская"' : new YMaps.GeoPoint(37.656067,55.763512),
                    'ст. м. "Таганская"' : new YMaps.GeoPoint(37.652731,55.741429),
                    'ст. м. "Речной вокзал"' : new YMaps.GeoPoint(37.4777,55.845868),
                    'ст. м. "Кузнецкий мост"' : new YMaps.GeoPoint(37.621907,55.760409),
                    'ст. м. "Войковская"' : new YMaps.GeoPoint(37.517302,55.832745)
                };
            // Центрируем карту на первом городе
            map.setCenter(destinations['ст. м. "Автозаводская"'], 16);
            // Ссылка на контейнер для меню
            var menuContainer = YMaps.jQuery('#mapMenu');
            // Генерирование меню
            for (var item in destinations) {
                // Используем замыкание, чтобы работать с конкретным свойством объекта
                (function (title, geoPoint) {
                    // Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
                    YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
                        .find('a') 
                            // Создаем обработчик по щелчку на ссылке
                            .bind('click', function () {
                                // Подчеркиваем все ссылки
                                menuContainer.find('a').css('text-decoration', 'underline');
                                // Кроме той, на которую щелкнули
                                YMaps.jQuery(this).css('text-decoration', 'none');
                                // Перемещаем карту
                                map.panTo(geoPoint, {flying: 1});
                                return false;
                            })
                            .end()
                         // Записываем элемент списка в список
                        .appendTo(menuContainer);
                })(item, destinations[item])
            }
            // Создание и добавление YMapsML-документа на карту
            var ml = new YMaps.YMapsML('http://www.tnb.ru/temp_map/address.xml');
            map.addOverlay(ml);
            // Обработчик неудачной загрузки YMapsML
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert('Ошибка: ' + error);
            });
            map.enableScrollZoom();
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.Zoom());
   map.addControl(new YMaps.MiniMap());
            map.addControl(new YMaps.ScaleLine());
  });
</script>

<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>
<style type="text/css">
html, body {margin:0;height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;min-width:600px;}
#left {float:left;width:250px;}
#right {margin-left:200px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id='wrapper'>
<div id='container'>
<div id='left'>
<body class="iframe">
<div class="demo">
<div id="accordion">
<h3><a href="#">Банкоматы ТНБ</a></h3>
<div style="height:587px;">
<ul id="mapMenu"></ul>
</div>
<h3><a href="#">Банкоматы Зенит</a></h3>
<div>
<p><br></p>
</div>
<h3><a href="#">Отделения</a></h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Все на одной странице</a></h3>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div><!-- End demo -->
</div>
<div id='right'>
<div id="YMapsID" style="width:670px;height:720px;"></div>
</div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
2 комментария
Авторизуйтесь, чтобы оставить комментарий
rodlex
28 января 2016, 07:04
Как вариант:

var menuContainer = YMaps.jQuery('#mapMenu'),
    menuContainer2 = YMaps.jQuery('#mapMenu2'),
    count = 0;

// Генерирование меню
for (var item in destinations) {
    // Используем замыкание, чтобы работать с конкретным свойством объекта
    (function (title, geoPoint) {
        // Создаем ссылку, обернутую в тег

для более приятного визуального восприятия
        YMaps.jQuery("

  • " + item + "
    • ")
                .find('a')
                    // Создаем обработчик по щелчку на ссылке
                    .bind('click', function () {
                        // Подчеркиваем все ссылки
                        menuContainer.find('a').css('text-decoration', 'underline');
                        // Кроме той, на которую щелкнули
                        YMaps.jQuery(this).css('text-decoration', 'none');
                        // Перемещаем карту
                        map.panTo(geoPoint, {flying: 1});
                        return false;
                    })
                    .end()
                 // Записываем элемент списка в список
                .appendTo( (count < 2) ? menuContainer : menuContainer2);
        })(item, destinations[item])
        count++;
    }

    nfsound2008
    28 января 2016, 07:04
    Александр спасибо большое!!!
    Ваше решение безусловно работает, и именно оно меня натолкнуло на немного другое решение, дело в том что общий список мне необходимо поделить не на две, а на четыре части...
    Посему родилось такое решение (может кому пригодится):
    Еще раз спасибо, Александр!






    jQuery UI Accordion - Default functionality







        










    Банкоматы КБ "Транснациональный Банк" ООО





      Банкоматы Зенит





        Отделения





          Все на одной странице