Question

有没有办法在传单标记内循环跨度，使用jQuery替换标记内的跨度？或者在JavaScript中标记循环数据的最佳方法是什么？

我在StackExchange上研究了其他方法，但没有任何工作。我对任何工作最接近的是使用$ els.slice ......

        jQuery(function() {
            var $els = $('span[id^=KOJC_]'), i = 0, len = $els.length;
            $els.slice(1).hide();
            setInterval(function() {
                $els.eq(i).fadeOut(function() {
                    i = (i + 1) % len;
                    $els.eq(i).fadeIn();
                })
            }, 500)
        });

https://jsfiddle.net/f00dl3/q1L5mrye/1/

Answer 1

使用jQuery执行此操作非常简单。只需按照班级获取地图上的所有图标，找到他们的（jQuery.find()），将其删除（jQuery.remove()）并添加新的html元素（jQuery.append()）：

for (div of $(".leaflet-marker-icon")) {
    $(div).find('span').remove()
    $(div).append('<p>25</p>')
};

这是工作JS FIDDLE。在此示例中，我已使用

替换了所有个标记

<强>更新

如果您想将特定标记的替换为您可以执行的特定：

// Replace the <span> of marker with ID '#KOJC_3' with the content of '#KOJC_1'    
var iconToReplace = $('#KOJC_3');   
iconToReplace.parent().append($('#KOJC_1'))
iconToReplace.remove()

这里是FIDDLE。

Answer 2

这个怎么样：

这需要一个元素数组，并始终为第一个数组成员设置动画（换句话说，没有计数器可以跟踪）。在每个步骤中，它只是循环数组，以便下一个元素在前面。

$(function() {
    var els = $('span[id^=KOJC_]').hide().toArray();
    if (!els.length) return;

    $(els[0]).show();
    setInterval(function () {
        $(els[0]).hide();
        els.push(els.shift());
        $(els[0]).fadeIn();
    }, 500)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="KOJC_1">A</span>
<span id="KOJC_2">B</span>
<span id="KOJC_3">C</span>
<span id="KOJC_4">D</span>
<span id="KOJC_5">E</span>

为了获得乐趣和利润，我们可以将循环行为提取到一个小的jQuery插件中，如下所示：

// plugin
$.fn.cycle = function (callback, interval) {
    var els = this.toArray();
    if (typeof callback === "function" && els.length >= 2) {
        setInterval(function () {
            callback(els[0], els[1]);
            els.push(els.shift());
        }, interval || 400);
    }
    return this;
};

// usage
$('span[id^=KOJC_]').cycle(function (curr, next) {
    $(curr).hide();
    $(next).fadeIn();
}, 500).hide().first().show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="KOJC_1">A</span>
<span id="KOJC_2">B</span>
<span id="KOJC_3">C</span>
<span id="KOJC_4">D</span>
<span id="KOJC_5">E</span>

循环通过Leaflet标记内的跨度

2 个答案: