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");
        });
    });
});

将选择器的每个子项转换为表格中的一行

1 个答案:

Working jsFiddle