如何使用 JavaScript 或 jQuery 从 HTML 中的无序列表中获取所有列表项？

Question

如何通过 js 或 jq 达到 ul 列表中的每个值以使用它来达到 html 中的任何部分？

var nav = document.getElementsByClassName('navigation'),
item = nav.getElementsbyTagName('li'),
i; 

for(i =0;i<item.length;i++ ){
console.log(item[i].childNodes);
i++;
}

Answer 1

此代码段将帮助您了解如何捕获和使用ul标记内的值。 在此示例中，我将值放入数组中，然后打印它们。 本示例由jQuery完成。

 let myArray = []; function putListToMyArray(){ $('#myUl > li').each(function(){ myArray.push($(this).text()); }); $('#willAppend').html(myArray); }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <ul id="myUl"> <li>something 1...</li> <li>something 2...</li> <li>something 3...</li> <li>something 4...</li> <li>something 5...</li> </ul> <button onClick="putListToMyArray()">Put them in an array</button> <hr /> <span id="willAppend">Array will append here...</span>

Answer 2

你有一些选择：

查询选择器全部（）

此方法返回一个 NodeList

假设您有一个简单的列表，您可以像这样获取节点值：

 // Get all nodes with querySelectorAll const elements = document.querySelectorAll('li'); // Iterate over elements elements.forEach(element => // Add click event to every node element.addEventListener('click', () => { console.log(element.innerText); })); // Log values elements.forEach(element => console.log(element.innerText));

 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

如果要减少 li 元素，可以像这样分配 class ：

 // Get all nodes with querySelectorAll const elements = document.querySelectorAll('li.menu'); elements.forEach(element => console.log(element.innerText));

 <ul> <li class="menu">1</li> <li class="menu">2</li> <li class="menu">3</li> </ul>

getElementByClassName()

此方法返回 html 集合

在这里您可以获得相同的结果，但您需要为 li 元素分配一个 class 名称：

 // Get elements by class name const elements = document.getElementsByClassName('menu'); // Iterate over the html collection for(let i = 0; i < elements.length; i++){ // Add event listener to click event elements[i].addEventListener('click', () => { // Log values console.log(elements[i].innerText); }) } // Log values for(let i = 0; i < elements.length; i++){ console.log(elements[i].innerText); }

 <ul> <li class="menu">1</li> <li class="menu">2</li> <li class="menu">3</li> </ul>