Question

我的列表结果显示我需要创建空格或将它们分组到我显示的列表结果中我尝试使用break标记但是它们不起作用

function GetProductDetails(barcodeId, coords)
{
    $.getJSON("api/products/?barcodeId=" + barcodeId + "&latitude=" + coords.latitude + "&longitude=" + coords.longitude)
        .done(function (data)
        {
            $('#result').append(data.message)
            console.log(data)
            var list = $("#result").append('<ul></ul>').find('ul');
            $.each(data.results, function (i, item)
            {
                if(data.results == null)
                {

                    $('#result').append(data.message)
                }

                else
                {
                    list.append('<li>ShopName :' + item.retailerName + '</li>');
                    list.append('<li>Name : ' + item.productName + '</li>');
                    list.append('<li>Rand :' + item.price + '</li>');
                    list.append('<li>Distance in Km :' + item.Distance + '</li>');

                }

            });

            $("#result").append(ul);

        });
}

Answer 1

list.append('<li><b>ShopName</b><p>' + item.retailerName + '</p></li>');
list.append('<li><b>Name</b><p>' + item.productName + '</p></li>');
list.append('<li><b>Rand</b><p>' + item.price + '</p></li>');
list.append('<li><b>Distance</b><p>' + item.Distance + '</p></li>');

Answer 2

非常确定list始终是结果框中的第一个ul，无论您实际添加多少$("#result").append(ul)。此外，您的最终ul是错误的，因为没有var list = document.getElementById('result').appendChild(document.createElement('ul')); data.results.forEach(function(item) { list.appendChild(document.createElement('li')) .appendChild(document.createTextNode("ShopName : "+item.retailerName)); list.appendChild(document.createElement('li')) .appendChild(document.createTextNode("Name : "+item.productName)); list.appendChild(document.createElement('li')) .appendChild(document.createTextNode("Rand : "+item.price)); list.appendChild(document.createElement('li')) .appendChild(document.createTextNode("Distance in Km : "+item.Distance)); });变量。

试试这个：

function addLIwithText(ul,text) {
    ul.appendChild(document.createElement('li'))
                       .appendChild(document.createTextNode(text));
}

Vanilla JS写作可能更冗长，但是一旦你超越了这个心理障碍，它就会更容易理解和使用;）当然，没有什么可以阻止你创建一个辅助函数：

addLIwithText(list,"ShopName : "+item.retailerName);
// and so on

然后你的循环内容变为：

{{1}}

如何对列表项进行分组以提高可读性

2 个答案: