jquery - 如何从 `ul li` 获取值并写入另一个 `ul li`

Question

问题:1

我有两个 ul li 元素，它们会从一个元素获取值并将其写入另一个元素。这就像将值从 li a 写入另一个 li b 使用 jquery html 函数。一切正常，尽管我只需要写前 5 个字符。

问题:2

我有一个进度条，每一步都会填满进度条。对于初始阶段，仪表既不会前进也不会后退，甚至导航也可以。在完成每个步骤时，进度表将展开，导航将添加一个类 active。因此，一旦我进入第 2 步或更进一步，我只需要为我已完成的步骤启用导航，就像我可以返回并编辑我已经完成的详细信息一样。

代码如下

$('article:not(:last-child) ul li, .continue').click(function() {
    $(this).parents('article').hide().next().fadeIn('slow');
    var index = $('article').index();
    $('.subnav-tabs>.row>.active').find('b').text($(this).find('a').html());

    $(".progress-meter>span").animate({
        "width": "+=20%",
    }, "slow").promise().done(function() {
        $('.subnav-tabs>.row>.active').removeClass('active').next().addClass('active');
    });

});

DEMO

提前致谢。

Answer 1

有点难以确定要求，但这是我的尝试。

JSFiddle:http://jsfiddle.net/91m965L0/3/

$('article:not(:last-child) ul li, .continue').click(function () {
    var $li = $(this);

    // Hide current article and show the next
    var $article = $li.closest('article');
    $article.hide().next().fadeIn('slow');

    // Get index of selected article
    var index = $article.index();

    // Copy the text to the matching slot
    $('.subnav-tabs .row div').eq(index).find('b').text($li.text().substr(0, 5));

    $(".progress-meter>span").animate({
        "width": ((index+1) * 20) + "%",
    }, "slow").promise().done(function () {
        $('.subnav-tabs .row div').eq(index).addClass('active').nextAll();
    });

});

$('.subnav-tabs').on('click', 'div.active', function () {
    var $item = $(this);
    $('article').eq($item.index()).fadeIn('slow').siblings('article').hide();
});

代码已更改为使用菜单和文章的并行索引值来使它们保持同步。进度条现在根据选择计算结束位置，而不是逐步增加 20%。您可能想要修改此行为，因为向后退会减少完成百分比。

注意:为了让 index 给出从 0 开始的索引(它包括原始菜单 div)，您需要有一个共同的文章祖先。