如何在jquery中創建基于json物件的串列和錨點-有解無憂

我正在嘗試創建一個串列。它已成功創建。我想使用 targetProducts 陣列在每個串列項中添加 anchar 鏈接。陣列項應位于單獨的錨標記中。我附上代碼

$( document ).ready(function() {
    var listArray = [
  {
    message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
    type: "HARD",
    targetProducts: [
      "BR-903PA",
      "BR-903PB",
      "BR-903PC"
    ]
  },
  {
    message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
    type: "SOFT",
    targetProducts: [
      "AE-918P"
    ]
  },
  {
    message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
    type: "SOFT",
    targetProducts: [
      "A/10-1600-030",
      "A/11-CA-403-12"
    ]
  },
  {
    message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
    type: "HARD",
    targetProducts: [
      "A/2289PA"
    ]
  }
];
let listUL = $('<ul>');
 listArray.filter((item)=>{
    listUL.append('<li>' item.message ':<a href="#" onclick="clicked(event)">' item.targetProducts '</a></li>')
})
$('#custom-list').append(listUL);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-list">
 <!-- append the list -->
</div>

要求：每個陣列項應位于單獨的錨標記中。它來自單個錨標簽

uj5u.com熱心網友回復：

您需要遍歷目標產品陣列并將每個專案附加到 li

$( document ).ready(function() {
        var listArray = [
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "HARD",
        targetProducts: [
          "BR-903PA",
          "BR-903PB",
          "BR-903PC"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "SOFT",
        targetProducts: [
          "AE-918P"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "SOFT",
        targetProducts: [
          "A/10-1600-030",
          "A/11-CA-403-12"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "HARD",
        targetProducts: [
          "A/2289PA"
        ]
      }
    ];
    let listUL = $('<ul>');
     listArray.filter((item)=>{
    var li=$('<li>' item.message '</li>')
    listUL.append(li);
       item.targetProducts.forEach(function(val){
       
       li.append('<a href="#" onclick="clicked(event)">' val '</a>,')
       
       })
    })
    $('#custom-list').append(listUL);
    
    });

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457358.html

標籤：html jQuery

上一篇：jquery從tr中洗掉所有td，但不是第一個

下一篇：如何在li中獲取ul