无法在 DIV 中添加 LI 项

Unable to add LI item inside DIV

本文关键字：添加 LI DIV      更新时间：2023-09-26

我正在使用名为jquery.subwayMap-0.5.0.js的地铁地图jquery插件。我$(".subway-map #map2").append('<li data-coords="10,6">NorthEast</li>');尝试了这段代码，但它不起作用。如果我将div 类从地铁地图更改为地铁地图 2，那么 li 将被添加到div 中。谢谢。

            <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>

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

复制（.clone）parent-container并在cloned-copy中执行.append，并在副本cloned重新初始化subwayMap并将其.append DOM 

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);

小提琴演示

相关文章：