使用javascript获取“ <li>”标签中的文本

时间:2018-06-27 07:11:52

标签: javascript html5 html-lists

我想获取li标签文本的列表。

我可以使用标签列表lis,但是我没有将文本内容分配给country对象。

脚本

    var lis = document.getElementById("navbar").getElementsByTagName("li");
        var url = '@Url.Action("Paychart", "Pivot")';
        var country;
        for (var i = 0; i < lis.length; i++)
        {
            country[i] = lis[i].textContent;
        }

HTML

    <div id="navbar">
        <ul id="sortable1" class="connectedSortable">
            @foreach (var item in Model)
            {
                <li class="ui-state-default">@item</li>
            }
        </ul>
    </div>

1 个答案:

答案 0 :(得分:1)

首先,您需要启动country,例如var country = {};,否则您将在此行country[i] = lis[i].textContent;

遇到错误

第二,我建议不要这样做

    var lis = document.getElementById("navbar").getElementsByTagName("li");

使用querySelectorAll,它可以像这样替换上面的

    var lis = document.querySelectorAll("#navbar li");

堆栈片段

var lis = document.querySelectorAll("#navbar li");

var url = '@Url.Action("Paychart", "Pivot")';
var country = {};
for (var i = 0; i < lis.length; i++) {
  country[i] = lis[i].textContent;
}

console.log(country)
<div id="navbar">
  <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>
  </ul>
</div>