jquery - 如何使用 jquery 获取 ul li 列表值

Question

我在 <ul> 中有两个项目列表秒。我只想从 ul 之一获取所有项目其中有 id的 sortable2

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable" name="test">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

我正在尝试这段代码，但它不起作用，因为我想要基于 id 的列表数据.我不知道如何实现它。

到目前为止，这是我的代码:

function myFunction() {
    var elementsLI = document.getElementsByTagName('li')
    var length = document.getElementsByTagName('li').length;
    for(var i = 0; i <= length ; ++i){
        alert(elementsLI[i].value);
    }
}

Answer 1

当您使用 jquery 时，您可以使用 .map() 和 .val()/.value 方法只有表单元素才能获取输入，此处在你的情况下你只需要 .text()/.html()/.textContent/.innerHTML:

var values = $("#sortable2 li").map(function() {
  return this.textContent.trim();
}).get();

$('pre').html(JSON.stringify(values, 0, 3))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable2" class="connectedSortable" name="test">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
<pre></pre>