Question

我正在使用名为jquery.subwayMap-0.5.0.js的地铁地图jquery插件。我要做的是在div中添加li。我试过这段代码$(".subway-map #map2").append('<li data-coords="10,6">NorthEast</li>');，但它没有用。如果我将div类从 subway-map 更改为 subway-map2 ，那么li将被添加到div.Any建议中？感谢。

            <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Subway Map</title>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="jquery.subwayMap-0.5.0.js"></script>
            <style type="text/css">
            body
            {
                font-family: Verdana;
                font-size: 8pt;
            }

            /* The main DIV for the map */
            .subway-map
            {
                margin: 0;
                width: 500px;
                height:410px;
                background-color: white;
            }

            /* Text labels */
            .text
            {
                text-decoration: none;
                color: black;
            }

            #legend
            {
                float: left;
                width: 250px;
                height:400px;
            }

            #legend div
            {
                height: 25px;
            }

            #legend span
            {
                margin: 5px 5px 5px 0;
            }
            .subway-map span
            {
                margin: 5px 5px 5px 0;
            }

            </style>
        </head>
        <body>

            <div class="subway-map" data-columns="12" data-rows="10" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="true" data-lineWidth="8">

                <ul id="map" data-color="#ff4db2" data-label="jQuery Widgets">          
                    <li data-coords="2,2"><a href="#">North</a></li>
                    <li data-coords="4,2"><a href="#">South</a></li>
                    <li data-coords="6,2"><a href="#">West</a></li>
                </ul>

                 <ul id="map2" data-label="jQuery Interactions" data-shiftCoords="0,-1">          
                    <li data-coords="8,2"><a href="#">West</a></li>
                    <li data-coords="10,4"><a href="#">East</a></li>

                </ul>

             </div>    

            <div id="legend"></div>


            <script type="text/javascript">

                $(".subway-map").subwayMap({ debug: true });

               $(".subway-map #map2").append('<li data-coords="10,6">NorthEast</li>');


            </script>

        </body>
        </html>

Answer 1

subwayMap插件将覆盖指定容器中的所有DOM。

制作.clone的副本（parent-container），并在.append中执行cloned-copy并重新初始化subwayMap而不是cloned在.append

中复制并DOM

＆＃13;

var clonned = $('.subway-map').clone(true);
$(".subway-map").subwayMap({
  debug: true
});
clonned.find("#map2").append('<li data-coords="10,6">NorthEast</li>');
clonned.subwayMap({
  debug: true
});
$('body').html(clonned);

＆＃13;

无法在DIV中添加LI项

1 个答案:

Fiddle Demo