Question

我有这段代码：

// If JS enabled, disable main input
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");

// If JS enabled then add fields
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');

// Add items to input field
var eachline='';
$("#add").click(function(){
    var lines = $('#resp_input').val().split('\n');
    var lines2 = $('#responsibilities').val().split('\n');
    if(lines2.length>10)return false;
    for(var i = 0;i < lines.length;i++){
        if(lines[i]!='' && i+lines2.length<11){
        eachline += lines[i] + '\n';
        }    
    }

        $('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");

    $('#resp_input').val('');
});

http://jsfiddle.net/ZTuDJ/40/

我正在尝试在添加职责时将“删除”权限与列表中出现的每个项目对齐。这是我尝试的代码，但它阻止了javascript工作，无论如何似乎是糟糕的标记。任何人都可以指出我应该如何做到这一点的正确方向。

JS

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li><span class="right"><a href="#">Remove</a></span>");

CSS

.right { float: right; }

Answer 1

由于"

中的<span class="right"><a href="#">Remove</a></span>，您的代码混乱了

因为你不能在UL中添加其他元素，除了LI，你可以在li里面添加你的remove

$('#responsibilities').text($("<div>" + eachline + "</div>").text())
.before("<li>"+$("<p>"+lines+"</p>")
.text()+" : <span class='right'><a href='#'>Remove</a></span></li>");

演示---> http://jsfiddle.net/ZTuDJ/42/

Answer 2

这fiddle可能对您有所帮助！

<强> JS

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+" : <span class='right'><a href='#'>Remove</a></span></li>");

<强> CSS

.right {
    float: right;
}

如何在此列表中插入“关闭”链接

2 个答案: