Append and jquery

Question

我在导航时遇到了一些问题，我希望有人可以帮助我。

我需要我当前的列表，以便当我推送另一种颜色的链接时，它将删除所选的链接并添加此列表。这样我当时只能在跟踪中有一个链接。

.HTML

<div class="trail"></div>
<ul class="navigation">
    <li><a class="orange" href="#">Link1</a>
    </li>
    <li><a class="black" href="#">Link2</a>
    </li>
    <li><a class="green" href="#">Link3</a>
    </li>
</ul>

.CSS

.trail {
    background-color:#ccc;
    padding:20px;
    margin-bottom:10px;
}
.trail > a {
    color:#ffffff;
}
.navigation {
    padding:20px;
    margin:0;
    background-color:#ccc;
    list-style:none;
}
.navigation > li > a {
    color:#ffffff;
} 
.orange {
    background-color:orange;
}
.black {
    background-color:black;
}
.green {
    background-color:green;
}

简讯

var count = 0;
    $('.navigation > li > a').on('click', function (e) {
        e.preventDefault();
        if (count < 1){
            var $addinput = $('.trail').append('<a href="#" class="' + $(this).attr('class') + '">' + $(this).html() + '</a>');            
            $('i').append($addinput);    
            count++;
        } 
    });

我也做了这个小提琴：http://jsfiddle.net/iBertel/LpX4R/2/

Answer 1

您可以简单地清空跟踪：

$('.navigation > li > a').on('click', function (e) {
    var $addinput = $('<a>').addClass(this.className).html(this.innerHTML);
    $('.trail').empty().append($addinput); // <= empty then append
    e.preventDefault();
});

示范

请注意，我还简化了元素创建并删除了字符串连接。

Answer 2

你只需要使用.clone()和.html()就可以有效地完成你的任务。

尝试

$('.navigation > li > a').on('click', function (e) {
    e.preventDefault();
    $(".trail").html($(this).clone());
});

演示

Answer 3

这应该可以解决问题：

$('.navigation > li > a').on('click', function (e) {
    e.preventDefault();
    $('.trail a').remove();
    var $addinput = $('.trail').append('<a href="#" class="' + $(this).attr('class') + '">' +     $(this).html() + '</a>');
    $("i").append($addinput);
});