Question

我是Javascript的新手，如果这是一个业余问题，请道歉。

我希望能够搜索列表，并根据目标项目列出的属性选择几个项目。

例如，假设我有以下列表：

<ul>
<li> Round Red Apple </li>
<li> Round Purple Grape </li>
<li> Round Yellow Lemon </li>
<li> Long Yellow Banana </li>
<li> Long Green Cucumber </li>
<li> Round Red Tomato </li>
</ul>

每个项目都列有两个属性。例如，我如何提取所有圆形项目（Apple，Grape，Lemon，Tomato），然后在网页上的其他位置仅显示这些项目（不是属性），让我们说在<div id="display"></div>？

稍微复杂一点，我如何提取所有圆形物品，但只提取不是红色的物品（葡萄，柠檬）？

Answer 1

遍历所有li项并使用startsWith()函数检查值并存储在单独的数组中以便稍后处理。

使用JQuery each() function的示例代码：

var filteredItems = [];
$('li').each(function(i, item)
{
     var itemName = $(item).html();
     if(itemName.startsWith('Round'))
     {
          filteredItems.add(itemName);
     }
});

现在，您可以迭代filteredItems以将项目附加到所需的div。

var container = $('#display');
$.each(filteredItems, function(i, item)
{
    container.append("<div>" + item + "</div");
});

修改

您也可以使用JavaScript以相同的方式执行此操作。

尝试：

JavaScript for loop进行迭代。

JavaScript getElementsByTagName()获取所有li项目

JavaScript appendChild()用于在另一个div中附加动态div。

通过列表中的项目提取和过滤（JS）

1 个答案: