Jquery 从html标记生成传单标记

我正在寻找一种方法，从网站上的html内容生成传单标记

我得到了这个html标记：

<div id="map"></div>

<div id="content">

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Lorem Ipsum Dolor</span><br>    
    <span class="lat">53.922429</span><br>  
    <span class="lng">9.682042</span><br>   
</div> 

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Consetetur sadipscing elitr</span><br>  
    <span class="lat">53.642978</span><br>  
    <span class="lng">10.613895</span><br>  
</div>      

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Sed diam nonumy</span><br>  
    <span class="lat">53.146250</span><br>  
    <span class="lng">9.666947</span><br>   
</div> 

</div>

马克#1
Lorem Ipsum Dolor

53.922429

9.682042

马克#1
消费精英
53.642978

10.613895

马克#1
Sed diam nonumy

53.146250

9.666947

现在，我喜欢从这个标记生成标记，就像我附加了这个脚本一样：

<script>

L.mapbox.accessToken = '<myAccessToken>';
var map = L.mapbox.map('map', '<myAccessID>').setView([51, 10], 6);
var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});

L.marker([53.922429, 9.682042], {icon: cssIcon01, title: 'Lorem Ipsum Dolor'}).addTo(map);
L.marker([53.642978, 10.613895], {icon: cssIcon01, title: 'Consetetur sadipscing elitr'}).addTo(map);
L.marker([53.146250, 9.666947], {icon: cssIcon01, title: 'Sed diam nonumy'}).addTo(map);

</script>

L.mapbox.accessToken=''；
var map=L.mapbox.map（'map'，''）.setView（[51,10]，6）；
var cssIcon01=L.divIcon（{className:'css-icon01'，iconSize:[14,14]}）；
L.marker（[53.922429，9.682042]，{图标：cssIcon01，标题：'Lorem Ipsum Dolor'}）.addTo（地图）；
L.marker（[53.642978，10.613895]，{图标：cssIcon01，标题：'Consetetur sadipscing elitr'}）；
L.marker（[53.146250，9.666947]，{icon:cssIcon01，title:'Sed diam nonumy'}）.addTo（地图）；

---

标记应该动态生成，这样我就可以添加任意多的标记。我想可能会涉及到变量和一些foreach脚本，但我不知道从哪里开始。

做您描述的事情应该不会有什么特别的困难，特别是因为您似乎计划使用jQuery

使用

标记“

类：

var$marks=$（“.mark”）

创建迭代函数并将其应用于找到的节点：

$marks.each（myFunction）

在

myFunction（indexInArray，mark）

中，检索特定于标记的数据：

• 标题：

  var Title=$（“.Title”，mark）.text（）

• 纬度：

  var-lat=parseFloat（$（“.lat”，mark）.text（））

• 经度：

  var lng=parseFloat（$（“.lng”，mark）.text（））

构建你的标记：

L.marker（[lat，lng]，{icon:cssIcon01，title:title}）。添加到（map）

---

非常感谢你的建议！这让我走上了正确的道路，但我仍然在做错事。这就是我现在拥有的：

<div id="content">
        <div class="mark">
            <h3>Mark #1</h3>
            <span class="title">Lorem Ipsum Dolor</span><br>    
            <span class="lat">53.922429</span><br>  
            <span class="lng">9.682042</span><br>   
        </div> 

        <div class="mark">
            <h3>Mark #2</h3>
            <span class="title">Consetetur sadipscing elitr</span><br>  
            <span class="lat">53.642978</span><br>  
            <span class="lng">10.613895</span><br>  
        </div> 

        <div class="mark">
            <h3>Mark #3</h3>
            <span class="title">Sed diam nonumy</span><br>  
            <span class="lat">53.146250</span><br>  
            <span class="lng">9.666947</span><br>   
        </div> 

</div>

<script>

    L.mapbox.accessToken = '<myToken>';
    var map = L.mapbox.map('map', '<myID>').setView([51, 10], 6);   // latitude, longitude, zoom level;  

    var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});


    var $marks = $(".mark")
    $marks.each(function() {
            var title = $(".title", mark).text()
            var lat = parseFloat($(".lat", mark).text())
            var lng = parseFloat($(".lng", mark).text())
        L.marker([lat, lng], {icon: cssIcon01, title: title}).addTo(map);
    }

</script>

马克#1
Lorem Ipsum Dolor

53.922429

9.682042

马克#2
消费精英
53.642978

10.613895

马克#3
Sed diam nonumy

53.146250

9.666947

L.mapbox.accessToken=''；
var map=L.mapbox.map（'map'，''）.setView（[51,10]，6）；//纬度、经度、缩放级别；
var cssIcon01=L.divIcon（{className:'css-icon01'，iconSize:[14,14]}）；
变量$marks=$（“.mark”）
$marks.each（函数（）{
var title=$（“.title”，mark）.text（）
var lat=parseFloat（$（“.lat”，mark）.text（））
var lng=parseFloat（$（“.lng”，标记）.text（））
L.标记（[lat，lng]，{icon:cssIcon01，title:title}）.addTo（地图）；
}

好的，我又做了一些修改，用这个脚本我终于让它工作了：

L.mapbox.accessToken = '<myToken>';
var map = L.mapbox.map('map', '<myID>').setView([51, 10], 6);   // latitude, longitude, zoom level;  

var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});

$(".mark").each(function() {
        var title = $(this).find(".title").html()
        var lat = $(this).find(".lat").html();
        var lng = $(this).find(".lng").html();
        L.marker([lat, lng], {icon: cssIcon01, title: title}).addTo(map);           
});

L.mapbox.accessToken=''；
var map=L.mapbox.map（'map'，''）.setView（[51,10]，6）；//纬度、经度、缩放级别；
var cssIcon01=L.divIcon（{className:'css-icon01'，iconSize:[14,14]}）；
$（“.mark”）。每个（函数（）{
var title=$（this.find（“.title”）.html（）
var lat=$（this.find（“.lat”）.html（）；
var lng=$（this.find（“.lng”）.html（）；
L.标记（[lat，lng]，{icon:cssIcon01，title:title}）.addTo（地图）；
});