How to get the value of li in jquery

jQuery is a very popular JavaScript library that provides rich functionality and ease of use for web development. One of the common application scenarios is to use jQuery to operate list elements in web pages to obtain the value of each list item (li).

In jQuery, you can use selectors to get elements in web pages. List elements are usually implemented using unordered lists (ul) or ordered lists (ol), and each list item is represented using li elements. Therefore, we can use the following method to get all list item elements:

var lis = $("li"); // 获取所有li元素

In the above code, the $ symbol is an alias of jQuery, used to represent a jQuery object, and "li" is a selector expression. Indicates that all li elements are selected.

After getting all the list item elements, we can use jQuery's each method to traverse them and get their values. The following sample code demonstrates how to iterate through each list item element, get their text (value) and print it to the console:

$("li").each(function() {
  var text = $(this).text(); // 获取当前列表项的文本
  console.log(text); // 打印文本
});

In the above code, the each method is used to iterate over all li element. In this traversal function, the this keyword points to the list item element currently being traversed. We can use the text method to get the text content of the list item.

Sometimes we need to get other attributes of list items, such as their IDs, class names, etc. jQuery provides the attr method to get the value of a specified attribute. The following sample code demonstrates how to obtain the ID attribute value of a list item:

$("li").each(function() {
  var id = $(this).attr("id"); // 获取当前列表项的ID属性值
  console.log(id); // 打印ID值
});

In the above code, the attr method is used to obtain the ID attribute value of the current list item element. We can use this method to get the value of any other property.

In short, by using jQuery's selectors and traversal functions, we can easily get the list item elements in the web page and get the values ​​of their text or other attributes. These functions allow us to more flexibly operate the content in web pages and achieve richer interactive effects.

The above is the detailed content of How to get the value of li in jquery. For more information, please follow other related articles on the PHP Chinese website!