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

Question

我在 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>

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

Answer 1

非常简单。看看:

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( => 这会循环所有选定的元素，为每个元素调用一个函数

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

 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 值。