时间戳

首页 > 解决方案 > 获取 HTML 简单列表的项目

javascript - 获取 HTML 简单列表的项目

问题描述

我有一个简单的清单。

<ul id="testCaseList" class="list-group testCaseList">
  <li class="list-group-item justify-content-between" style="">test1 (hi)</li>
  <li class="list-group-item justify-content-between" draggable="false" style="">test2 (bye)</li>
  <li class="list-group-item justify-content-between" style="">test3 (hello)</li>
</ul>

我想用数组创建一个数组。带有名称（类型）。所以结果会是这样的：

[
 ["test1", "hi"] 
 ["test2", "bye"] 
 ["test3", "hello"] 
]

我正在尝试这样的事情，但我遇到了多个错误。

var testCaseList = $('#testCaseList');
  $.each(testCaseList, function (index, item) {
    console.log(item);
    data.push(item.text());
  });
  console.log(data);

未捕获的 TypeError：item.text 不是 HTMLUListElement 中的函数
。(create-flow.js:182)
在 Function.each (jquery-3.2.1.min.js:2)
在 a.onUpdate (create-flow.js:180)
在 k (Sortable.min.js:2)
在 a._onDrop (Sortable.min.js:2)
在 a.handleEvent (Sortable.min.js:2)

标签： javascriptjqueryhtml

解决方案

为此，您可以使用map()从匹配的元素构建数组。在map()处理程序中，您可以使用带有组的正则表达式来提取您需要的文本值。尝试这个：

var arr = $('ul li').map(function() {
  var matches = /(.*) \((.*)\)/g.exec($(this).text());
  matches[0] = '';
  return [matches];
}).get();

console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="testCaseList" class="list-group testCaseList">
  <li class="list-group-item justify-content-between" style="">test1 (hi)</li>
  <li class="list-group-item justify-content-between" draggable="false" style="">test2 (bye)</li>
  <li class="list-group-item justify-content-between" style="">test3 (hello)</li>
</ul>

推荐阅读