仅显示与 jquery 中的 url id 匹配的产品

Only display product that matches url id in jquery

本文关键字：id url 显示 jquery 中的      更新时间：2023-09-26

我正在尝试使用 html 表和 xml 填充我的产品.html页面。我的数据在var "productsXmlString"下。这无法更改。我的问题是我的代码放置了所有产品，而不仅仅是与 url 具有相同 id 的产品。

var productsDomTree = $.parseXML(productsXmlString);
var $products = $( productsDomTree );
var url = $(location).attr('href');
var urlid = url.substring(url.lastIndexOf('=') + 1);
$products.find('product').each(function(){
var id = $(this).find('id').text();
var title = $(this).find('title').text();
var brand = $(this).find('brand').text();
var price = $(this).find('price').text();
var desc = $(this).find('description').text();
$('#mainTable > tbody').append("
<tr>
  <td>" + id + "</td>
  <td>" + title + "</td>
  <td>" + brand + "</td>
  <td>" + price + "</td>
  <td>" + desc + "</td>
</tr>

我的数据太长，无法包含在此处，但一个例子是：

'<product top-level-category="Compact" sub-level-category="All-in-one"> <id>0019</id><title>NIKON COOLPIX</title><brand>Nikon</brand><price>200</price><description>example text</description>'

任何解决方案都将是巨大的帮助

您可以使用filter来确保每个产品都符合特定条件。以下代码片段重点介绍了如何执行此操作：

var id = /* read the id from the url */;
var $filtered = $products.find('product').filter((i, el) => {
  // Only return true if id matches the value in the url
  return $(el).find('id').text() === id;
});
相关文章：