jquery replaces li content-Front-end Q&A-php.cn

jquery replaces li content

WBOY

Release： 2023-05-08 21:20:36

Original

776 people have browsed it

jQuery is a very popular JavaScript library used to simplify HTML document operations and event handling. One of the common operations is to replace the content of an HTML list item (li). In this article we will explain in detail how to use jQuery to complete this operation.

First, we need a basic HTML document containing an unordered list, each list item containing some text content. Here is a sample HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
</body>
</html>

Copy after login

In the above HTML code, we have included a jQuery CDN (Content Delivery Network) link. This link will allow us to write JavaScript code locally using jQuery.

Now, we will write some jQuery code to replace the contents of the second list item. First, we need to add a unique ID attribute to the second list item so that we can reference it in jQuery. Here is the sample code to add the ID attribute to the second list item:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li id="list-item-2">列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
  <script>
    $(document).ready(function() {
      $('#list-item-2').html('替换后的内容');
    });
  </script>
</body>
</html>

Copy after login

In the above code, we use the $(document).ready() function to ensure that our code only loads when the HTML document Run only after completion. We then use the $('#list-item-2') selector to select the list item with the ID "list-item-2" and replace its content with the "replaced content" using the html() method.

Now we will see that the text of the second list item has been replaced with "replaced content".

If we want to replace the contents of multiple list items at once, we can use jQuery's each() method. The following is a sample code to replace the contents of the 2nd and 4th list items with new text:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li id="list-item-2">列表项2</li>
    <li>列表项3</li>
    <li id="list-item-4">列表项4</li>
    <li>列表项5</li>
  </ul>
  <script>
    $(document).ready(function() {
      var newItemText = '新的文本';
      $('#list-item-2, #list-item-4').each(function() {
        $(this).html(newItemText);
      });
    });
  </script>
</body>
</html>

Copy after login

In the above code, we have created a new variable newItemText containing the content to be replaced text. We then select the 2nd and 4th list items using the $('#list-item-2, #list-item-4') selector and execute the function for each match using the .each() method. In this function, we replace the contents of the list item with new text.

To summarize, in this article we learned how to use jQuery to replace the content of HTML list items (li). Whether you are replacing a single list item or multiple list items at once, it can be done using jQuery's html() method and each() method. Now we can easily manipulate elements in HTML documents to provide a better user experience for our users.

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