使用jquery向列表中添加项

Add items to a list using jquery

本文关键字：添加 列表 jquery 使用      更新时间：2023-09-26

我有一个我想不明白的问题。我正在使用这个代码:

http://jsfiddle.net/spadez/ZTuDJ/32/

// 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() );
    $('#resp_input').val('');
});

的想法是，您在责任字段中键入一些东西，它被插入到文本区域。我还想做的是，当一个项目插入到文本区域时，它也会以列表格式在上面打印出来，就像这样:

<li>inserted item 1</li> <li>inserted item 2</li>

我对javascript真的很陌生，但这是我最好的尝试，基于网上找到的信息:

$("#resp").append('<li> +eachline </li> ')   

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

Demo ---> http://jsfiddle.net/ZTuDJ/34/

http://jsfiddle.net/pjdicke/ZTuDJ/35/

您需要创建一个<ul>，然后将其添加到

下面
$('#responsibilities').text( $("<div>" + eachline + "</div>").text() );
// add this line after above 
$('<li>' + lines + '</li>').appendTo('#list');

我已经在你之前的问题中为你解决了这个问题。

Jquery在不重新加载页面的情况下添加列表项

http://jsfiddle.net/blackjim/VrGau/15/

var $responsibilityInput = $('#responsibilityInput'),
    $responsibilityList = $('#responsibilityList'),
    $inputButton = $('#addResp'),
    rCounter = 0;
var addResponsibility = function () {
    if(rCounter < 10){
        var newVal = $responsibilityList.val()+$responsibilityInput.val();
        if(newVal.trim()!==''){
            var newLi = $('<li>');
            $('ul#respList').append(newLi.text(newVal));
            $responsibilityList.val('');
            rCounter+=1;    
        }
    }
}
$inputButton.click(addResponsibility);
相关文章：