jquery は li コンテンツを置き換えます-フロントエンドQ&A-php.cn

jquery は li コンテンツを置き換えます

WBOY

リリース： 2023-05-08 21:20:36

オリジナル

746 人が閲覧しました

jQuery は、HTML ドキュメントの操作とイベント処理を簡素化するために使用される非常に人気のある JavaScript ライブラリです。一般的な操作の 1 つは、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 (コンテンツ配信ネットワーク) リンクが含まれています。このリンクにより、jQuery を使用してローカルで JavaScript コードを作成できるようになります。

次に、2 番目のリスト項目の内容を置き換える jQuery コードを作成します。まず、jQuery で参照できるように、2 番目のリスト項目に一意の ID 属性を追加する必要があります。 ID 属性を 2 番目のリスト項目に追加するサンプルコードを次に示します。

<!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() メソッドを使用してそのコンテンツを「置換されたコンテンツ」に置き換えます。

これで、2 番目のリスト項目のテキストが「置換されたコンテンツ」に置き換えられたことがわかります。

複数のリスト項目の内容を一度に置換したい場合は、jQuery の each() メソッドを使用できます。以下は、2 番目と 4 番目のリスト項目の内容を新しいテキストに置き換えるサンプルコードです。

<!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') セレクターを使用して 2 番目と 4 番目のリスト項目を選択し、.each() メソッドを使用して一致ごとに関数を実行します。この関数では、リスト項目の内容を新しいテキストに置き換えます。

要約すると、この記事では、jQuery を使用して HTML リスト項目 (li) のコンテンツを置き換える方法を学びました。単一のリスト項目を置換する場合でも、一度に複数のリスト項目を置換する場合でも、jQuery の html() メソッドと each() メソッドを使用して置換できます。 HTML ドキュメント内の要素を簡単に操作して、ユーザーにより良いユーザーエクスペリエンスを提供できるようになりました。

以上がjquery は li コンテンツを置き換えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。