javascript - 获取 li 项目并将它们添加到 javascript obj

Question

我有一个列表元素，我想将列表元素添加到具有键值对的对象。我期待像phrase={1:First,2:second}我obj尝试向 obj 添加元素但它的输出为空的输出。

var phrase = {};
var inc = 1;
$("#menu select-li").each(function() {
  phrase[inc] = $(this).text();
  inc++;
});
console.log(phrase)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-pane fade show active">
  <ul class="end-info" id="menu">

    <li value="First" class="select-li First">
      <span class="caret First">&nbsp;</span>First</li>
    <ul class="nested First">
      <li value="First Report">First Report</li>
      <li value="Second Report">Second Report</li>
      <li value="Third Report">Third Report</li>
    </ul>
    <li value="second" class="select-li Second">
      <span class="caret second">&nbsp;</span>second</li>
    <ul class="nested second">
      <li value="First Report">First Report</li>
      <li value="Second Report">Second Report</li>
    </ul>
  </ul>
  <div>

标签： javascripthtml

Answer 1

你是什​​么意思"#menu select-li"？您的代码中没有调用标签<select-li>。你真正需要的是：

$("#menu .select-li").each();

此外，用于$(this).attr("value")从value属性中获取内容。

这index将帮助您获得正确的索引。

您的 HTML 也是无效的。正确的将是：

var phrase = {};
$("#menu .select-li").each(function(index) {
  phrase[index + 1] = $(this).attr("value");
});
console.log(phrase)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-pane fade show active">
  <ul class="end-info" id="menu">
    <li value="First" class="select-li First">
      <span class="caret First">&nbsp;</span>First
      <ul class="nested First">
        <li value="First Report">First Report</li>
        <li value="Second Report">Second Report</li>
        <li value="Third Report">Third Report</li>
      </ul>
    </li>
    <li value="second" class="select-li Second">
      <span class="caret second">&nbsp;</span>second
      <ul class="nested second">
        <li value="First Report">First Report</li>
        <li value="Second Report">Second Report</li>
      </ul>
    </li>
  </ul>
</div>