jquery - 将选择器的每个子项变成我表中的一行

Question

我有一个div有多个 uls 。每个ul有一个与之配套的按钮。当用户单击按钮时，我想删除 ul ，其 siblings ，及其 parent从主div然后创建一个table代表删除的 ul这样每个 li 中的商品名称和数量显示为 table 中的一行然后附加 table到中学div .

Here's what I have so far

据我现在所知，如果 ul有多个lis ，所有商品名称和数量都显示在一行中。

这里是full screen result.

<强> Code:

$(document).ready(function () {
    $('.accptOrdr').click(function () {
        var text = $(this).closest('fieldset').children().first();
        console.log(text);
        var thisTr = text.parent();
        var itemName = $(this).parent().prev().find('.list-group-item').justtext();
        var badgeHTML = $("<div/>").append($(this).parent().prev().find('.badge').clone()).html();
        var result = $("<div/>").append('<br>');
        /*var finalResult = badgeHTML + result;*/
        /*var result = badgeHTML.add('<br/>');   
            var finalResult = result.appendTo('result')*/
        console.log($('.table.accepted-orders'));
        $('.accepted-orders').append('<div class="well well-sm order col-md-5" style="width: 48%; height: 280px;"><div>Time remaining: 20 minutes</div> <div class="pull-left">' + text.html() + '</div><table class="table table-striped table-bordered"><thead><tr><th>Item</th><th>Quantity</th><th>Note</th></tr></thead><tr><td>  ' + itemName + '</td> <td> ' + badgeHTML + '  </td> </tr> </table> <div class="pull-right"> <button type="button" class="btn btn-primary btns">Ready</button> </div></div>');
        $('#nwOrd3').remove();
        $(".btns").click(function () {
            alert("Food is ready");
        });
    });
});
jQuery.fn.justtext = function () {
    return $(this).clone()
        .children()
        .remove()
        .end()
        .text();
};  

我该如何修复它，以便每个li中的商品名称和数量在 table 中显示为单独的行？

Answer 1

当订单有多个项目时，要使每个项目在结果表中都有自己的行，您需要获取元素并迭代它们，而不是 jset 从父级获取文本:

Working jsFiddle

$(document).ready(function () {
    $('.accptOrdr').click(function () {
        var fieldset = $(this).closest('fieldset');
        var text = fieldset.children().first();
        var lis= fieldset.find('li');
        var items = [];
        lis.each(function(){
            var itemName = $(this).justtext();
            var qty = $(this).find('.badge').text();
            var note = ''; // get some note here?
            var badge = '<span class="badge pull-right">'+qty+'</span>'
            items.push('<tr><td>'+itemName+'</td><td>'+badge+'</td><td>'+note+'</td></tr>' )
        });
        var result = $("<div/>").append('<br>');
        $('.accepted-orders').append('<div class="well well-sm order col-md-5" style="width: 48%; height: 280px;"><div>Time remaining: 20 minutes</div> <div class="pull-left">' + text.html() + '</div><table class="table table-striped table-bordered"><thead><tr><th>Item</th><th>Quantity</th><th>Note</th></tr></thead>'+items.join('')+'</table> <div class="pull-right"> <button type="button" class="btn btn-primary btns">Ready</button> </div></div>');
        fieldset.parent().remove();
        $('.accepted-orders').children().last().find(".btns").click(function () {
            alert("Food is ready");
        });
    });
});