Jquery 将选择器的每个子级转换为我的表中的一行

我有一个

div

，它有多个

ul

。每个

ul

都有一个与其配套的按钮。当用户单击我想删除

ul

的按钮时，其

同级

，然后从主

div

创建一个

表

，该表表示删除的

ul

，这样每个

li

中的项目名称和数量显示为

表中的一行

，然后将

表

附加到辅助

div

正如我现在看到的，如果一个

ul

有多个

lis

，那么所有项目名称和数量都显示在一行中

这是

代码：

$(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();
};  

$（文档）.ready（函数（）{
$（'.accptOrdr'）。单击（函数（）{
var text=$（this.closest（'fieldset'）.children（）.first（）；
console.log（文本）；
var thisTr=text.parent（）；
var itemName=$（this.parent（）.prev（）.find（'.list group item'）.justtext（）；
var badgeHTML=$（“”）.追加（$（this.parent（）.prev（）.find（'.badge'）.clone（））.html（）；
变量结果=$（“”）。追加（“
”）；
/*var finalResult=badgeHTML+结果*/
/*var result=badgeHTML.add（“
”）；
var finalResult=result.appendTo（'result'）*/
log（$（'.table.accepted orders'）；
$（'.accepted orders'）.append（'剩余时间：20分钟'+text.html（）++'ItemQuantityNote'+itemName++''+badgeHTML++'Ready'）；
$（'#nwOrd3'）。删除（）；
$（“.btns”）。单击（函数（）{
警惕（“食物准备好了”）；
});
});
});
jQuery.fn.justtext=函数（）{
返回$（this.clone（））
.儿童（）
.删除（）
(完)
.text（）；
};  

---

如何修复它，使每个

li

中的项目名称和数量在

表中显示为一个单独的行？
当订单有多个项目时，使每个项目在结果表中都有自己的行，您需要获取元素并对其进行迭代，而不是jset从父级获取文本：

$（文档）.ready（函数（）{
$（'.accptOrdr'）。单击（函数（）{
var fieldset=$（this）.closest（'fieldset'）；
var text=fieldset.children（）.first（）；
var lis=fieldset.find（'li'）；
var项目=[]；
lis.each（函数（）{
var itemName=$（this.justtext（）；
变量数量=$（this.find（'.badge'）.text（）；
var note=''；//是否在此处获取一些注释？
var徽章=“”+数量+“”
物品。推送（“”+itemName+“”+badge+“”+note+“”）
});
变量结果=$（“”）。追加（“
”）；
$（'.accepted orders'）.append（'剩余时间：20分钟'+text.html（）+'ItemQuantityNote'+items.join（''）+'Ready'）；
fieldset.parent（）.remove（）；
$（'.accepted orders'）.children（）.last（）.find（“.btns”）。单击（函数（）{
警惕（“食物准备好了”）；
});
});
});
您应该重新命名您的问题。它只对你有意义。没有人会知道你的问题是关于什么的。只是一个tip@DelightedD0D：你能为我重新命名吗？我什么也没得到肯定，只要我弄明白你在问什么，哈哈。现在就通读代码。所以，如果我在你的JSFIDLE中，我在所有新订单上单击“接受”，它看起来是这样的，你希望右侧是什么样子？我希望
数量
正确显示在右侧。它们没有正常出现
$(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");
        });
    });
});