Question

我目前正在使用jQuery .clone();来获取当前的HTML表单元素值 （已经被用户插入或切换）然后附加到我的.results div元素。

基本上用户填写表单 - ＆gt;可以点击“添加按钮” - ＆gt;表单值显示在.results div 中（以及删除时添加或克隆的上一个最新行，单击.remove按钮时）。

我正在尝试输出 .add和<ul>中的每一组（每次设定含义，<li>被击中） 标签，所以它将输出更整洁，我将有更多的输出控制。 我试图在同一个'.appendTo'中添加它但是不正确。

$(document).ready(function() { checkRemove() $('.add').click(function() { $('input[type=text], input[type=checkbox], option:selected').clone().appendTo('.results'); checkRemove(); }); $('.remove').click(function() { $('input[type=text]:last, input[type=checkbox]:last, option:selected').remove(); checkRemove(); }); }); function checkRemove() { if ($('input[type=text]').length == 1) { $('.remove').hide(); } else { $('.remove').show(); } };

同样，上面的正在运作。我希望输出在 <ul><li></li></ul> HTML标记内发生;所以它更干净，更容易风格。目前，它通过.appendTo直接在.results div内输出，无格式。

Answer 1

这是症结所在。添加一个空的ul标签

$('.result').html("<ul class='mylist'></ul>");

将li标记附加到该列表然后添加你的克隆！

$('.mylist').append($('<li>')).append("");
        $('.allinputs input[type=text],.allinputs input[type=checkbox], option:selected').clone().appendTo($('.mylist li:last-child'));;

可能需要根据您的要求进行修改。

＆＃13;

$(document).ready(function() {
	$('.result').html("<ul class='mylist'></ul>");
     checkRemove();
    $('.add').click(function() {
    	$('.mylist').append($('<li>')).append("");
        $('.allinputs input[type=text],.allinputs input[type=checkbox], option:selected').clone().appendTo($('.mylist li:last-child'));;
        
        checkRemove();
    });
    $('.remove').click(function() {
        $('input[type=text]:last, input[type=checkbox]:last, option:selected').remove();
        checkRemove();
    });
});
function checkRemove() {
    if ($('input[type=text]').length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allinputs">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button class="add">click</button>
</div>
Result<br/>
<div class="result"></div>

＆＃13;

希望这有帮助！

Answer 2

你应该使用appendTo和一些jQuery对象，比如$（“。results”）。请检查一下：

$(document).ready(function() {
    checkRemove()
    $('.add').click(function() {
        $('input[type=text], input[type=checkbox], option:selected').clone().appendTo($('.results'));
        checkRemove();
    });
    $('.remove').click(function() {
        $('input[type=text]:last, input[type=checkbox]:last, option:selected').remove();
        checkRemove();
    });
});

要在ul标签内附加，请使用：

var elem = $("<ul></ul>");

现在，

elem.append($("<li></li>").append(
$('input[type=text], input[type=checkbox], option:selected').clone()));

在<ul> <li> ... </li> </ul>

2 个答案: