简单的jQuery循环遍历<li>元素并添加到<datalist>

Question

我的jQuery循环有问题，它没有显示我的li元素的值。我在输入搜索栏中得到类似[object HTMLElement]的内容。

<div id="sidebar-wrapper">
   <input type="text" list="searchList" class="search" size="20" placeholder="Search..." /> 
    <datalist id="searchList"> </datalist>

        <ul class="sidebar-nav" id="menu">

            <li>
                <a id="item1" href="#item1">item1 </a>
            </li>
            <li>
                <a id="item2" href="#item2">item2</a>
            </li>

        </ul>
    </div>
<br>

 $('.sidebar-nav li').each( function(index,item) {
        var option = $('<option value="'+item+'">');
        $('#searchList').append(option);
    });

Answer 1

此处item将是li dom元素，因此您看到object HTMLLIELEMENT

您需要捕获每个text的{​​{1}}。您可以使用jquery li方法。还修剪以删除任何空白区域

text

JSFIDDLE