jquery가 li 콘텐츠를 대체합니다.-프런트엔드 Q&A-php.cn

jquery가 li 콘텐츠를 대체합니다.

WBOY

풀어 주다： 2023-05-08 21:20:36

원래의

771명이 탐색했습니다.

jQuery는 HTML 문서 조작 및 이벤트 처리를 단순화하는 데 사용되는 매우 인기 있는 JavaScript 라이브러리입니다. 일반적인 작업 중 하나는 HTML 목록 항목(li)의 내용을 바꾸는 것입니다. 이 기사에서는 jQuery를 사용하여 이 작업을 완료하는 방법을 자세히 설명합니다.

먼저, 순서가 지정되지 않은 목록이 포함된 기본 HTML 문서가 필요하며, 각 목록 항목에는 텍스트 내용이 포함되어 있습니다. 다음은 샘플 HTML 문서입니다.

<!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>

로그인 후 복사

위 HTML 코드에는 jQuery CDN(Content Delivery Network) 링크가 포함되어 있습니다. 이 링크를 사용하면 jQuery를 사용하여 로컬에서 JavaScript 코드를 작성할 수 있습니다.

이제 두 번째 목록 항목의 내용을 대체하는 jQuery 코드를 작성하겠습니다. 먼저, jQuery에서 참조할 수 있도록 두 번째 목록 항목에 고유 ID 속성을 추가해야 합니다. 다음은 두 번째 목록 항목에 ID 속성을 추가하는 샘플 코드입니다.

<!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>

로그인 후 복사

위 코드에서는 $(document).ready() 함수를 사용하여 HTML 문서 로드가 완료된 후에만 코드가 실행되도록 합니다. . 그런 다음 $('#list-item-2') 선택기를 사용하여 ID가 "list-item-2"인 목록 항목을 선택하고 html() 메서드를 사용하여 해당 콘텐츠를 "대체된 콘텐츠"로 바꿉니다.

이제 두 번째 목록 항목의 텍스트가 "대체된 콘텐츠"로 대체된 것을 볼 수 있습니다.

여러 목록 항목의 내용을 한 번에 바꾸려면 jQuery의 Each() 메서드를 사용할 수 있습니다. 다음은 두 번째 및 네 번째 목록 항목의 내용을 새 텍스트로 바꾸는 샘플 코드입니다.

<!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>

로그인 후 복사

위 코드에서는 바꿀 텍스트가 포함된 새 변수 newItemText를 만들었습니다. 그런 다음 $('#list-item-2, #list-item-4') 선택기를 사용하여 두 번째 및 네 번째 목록 항목을 선택하고 .each() 메서드를 사용하여 각 일치 항목에 대해 함수를 실행합니다. 이 함수에서는 목록 항목의 내용을 새 텍스트로 바꿉니다.

요약하자면, 이 글에서는 jQuery를 사용하여 HTML 목록 항목(li)의 내용을 바꾸는 방법을 배웠습니다. 단일 목록 항목을 바꾸든 여러 목록 항목을 한 번에 바꾸든 관계없이 jQuery의 html() 메서드와 Each() 메서드를 사용하여 수행할 수 있습니다. 이제 HTML 문서의 요소를 쉽게 조작하여 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 jquery가 li 콘텐츠를 대체합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!