如何組我更多的可讀性列表項

我的列表結果顯示我需要創建我使用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); 

     }); 
}

來源

2013-12-12 Klein_Jnr

有預覽...請在發佈前檢查！：3 –

你是什麼意思，你「嘗試使用標籤」？問題是什麼？你問如何將CSS樣式應用到最後一個列表元素，所以底部有多餘的填充？ –

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>');

來源

2013-12-12 12:48:56 n1kkou

很確定list總是會成爲結果框中的第一個ul，無論您實際添加多少個。另外，由於沒有ul變量，因此您的最終$("#result").append(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)); 
});

Vanilla JS可能會更詳細寫的，但它是非常容易理解和使用，一旦你過去是心理障礙;）當然，沒有什麼可以阻止你創造一個輔助功能：

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

然後你的循環內容變成：

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

來源

2013-12-12 12:49:58

如何組我更多的可讀性列表項

回答

相關問題