时间戳

首页 > 解决方案 > 如何在 html 中获取一组值？

javascript - 如何在 html 中获取一组值？

问题描述

我在 html 中有一组从 1 到 19 的值，但没有排序。所以我不知道如何在 javascript 中获取这些值。

<ol id="cities" class="example">   
   <li class="ui-state-default" value="2">city a</li>
   <li class="ui-state-default" value="8">city b</li>
   <li class="ui-state-default" value="9">city c</li>
   <li class="ui-state-default" value="12">city d</li>
   <li class="ui-state-default" value="14">city e</li>
   <li class="ui-state-default" value="16">city f </li>
   <li class="ui-state-default" value="18">Seguro g</li>
   <li class="ui-state-default" value="19">city h</li>
</ol>

然后我想收到所有值，因为我可以使用它。var city = 2,8,9,12,14,16,18,19 我尝试了某种代码来显示，但我已经删除了，因为它不起作用。

标签： javascriptjquery

解决方案

很容易。看一看：

var values = [];
document.querySelectorAll('li').forEach(e=>values.push(e.value));
console.log(values);
<ol id="cities" class="example">   
   <li class="ui-state-default" value="2">city a</li>
   <li class="ui-state-default" value="8">city b</li>
   <li class="ui-state-default" value="9">city c</li>
   <li class="ui-state-default" value="12">city d</li>
   <li class="ui-state-default" value="14">city e</li>
   <li class="ui-state-default" value="16">city f </li>
   <li class="ui-state-default" value="18">Seguro g</li>
   <li class="ui-state-default" value="19">city h</li>
</ol>

解释：

var values = []=> 这是一个将填充值的数组。

document.querySelectorAll('li')=> 这将选择所有li元素。

forEach(=> this 循环选择的所有元素，为每个元素调用一个函数

e=>values.push(e.value)=> 这是一个将每个元素推送到 values 数组的函数，它相当于：

 function(e) {
     values.push(e.value);
 }

你甚至可以进一步减少它：

var values = Array.from(document.querySelectorAll('li')).map(e=>e.value);
console.log(values);
<ol id="cities" class="example">   
   <li class="ui-state-default" value="2">city a</li>
   <li class="ui-state-default" value="8">city b</li>
   <li class="ui-state-default" value="9">city c</li>
   <li class="ui-state-default" value="12">city d</li>
   <li class="ui-state-default" value="14">city e</li>
   <li class="ui-state-default" value="16">city f </li>
   <li class="ui-state-default" value="18">Seguro g</li>
   <li class="ui-state-default" value="19">city h</li>
</ol>

如果你想要一个 jQuery 版本，只需将 document.querySelectorAll 替换为 $。在这种情况下，您将不再需要Array.from(，因为 jQuery 结果对象中已经有 map 方法。

编辑

根据您的评论，只需替换e=>values.push(e.value)为e=>{ if (e.value) values.push(e.value); }，您将从结果数组中排除 0 值。

推荐阅读