Jquery 如何从'ul li'中获取值并在另一个'ul li'中写入`

问题:1

我有两个

ulli

元素，它们将从一个元素到另一个元素获取和写入值。这就像使用jquery

html

函数将值从

LIA

写入另一个

LIB

一样。一切都很好，尽管我只需要写前5个字符

问题:2

我有一个进度条，每个步骤的进度条都会被填满。在初始阶段，仪表既不会前进也不会后退，甚至导航也不会工作。填充每一步后，进度表将展开，导航将添加一个类

活动

。因此，一旦我进入步骤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');
    });

});

---

提前感谢。

确定需求有点困难，但我想尝试一下

JSFiddle：

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

---

注意：为了让

index

给出基于0的索引（它包括原始文档中的菜单div），您需要为文章提供一个共同的祖先。

关于问题1：嗯？你能澄清一下吗。您是否只希望将单击的LI中的前5个字符复制到菜单项中？Re:问题2:如何向后？进度条的作用是否类似于一个菜单，并将您带回以前的

文章

？否进度条根本不是一个菜单，它根据上面的菜单进行反应。

$('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();
});