用Javascript获取html代码中项目列表中一个项目的值

Javascript to get value of one item in a list of items in html code

本文关键字：项目 一个 列表 获取 Javascript html 代码      更新时间：2023-09-26

我有一个项目列表，其中有隐藏的输入，但都包含不同的值，如何从每个li 中获取值

<ul class="happiness">
 <li><input type="hidden" value="guid-xxxx0"/> Happy </li>
 <li><input type="hidden" value="guid-xxxx1"/> Sad </li>
 <li><input type="hidden" value="guid-xxxx2"/> I dont know </li>
</ul>

这样做对吗？

$(".happiness").click(function(){
 var value = $(this).find("li input").val();
});

将单击事件绑定到li以使用元素包含的值更新#displayer内容。我认为在实践中<li>会有更多的内容。

例如：

Array.prototype.forEach.call(document.querySelectorAll('li'), function (elem) {
    elem.addEventListener('click', function () {
        document.getElementById('displayer').textContent =
            this.querySelector('input').value;
    });
});

这是可行的，但它确实做出了一些假设，例如每个li只有一个input子代。

相关文章：