JavaScript で項目のリスト間にカンマを動的に追加するにはどうすればよいですか?

CSS の "::before" 疑似要素を使用すると、最初の項目を除く各リスト項目の前にカンマを動的に追加できます。リスト項目をターゲットにし、「content」プロパティを使用することにより、リスト項目の内容の前にカンマを挿入できます。さらに、「:not(:first-child)」疑似クラスを使用して、先頭以外のリスト項目のみがカンマで追加されるようにすることができます。

次の HTML DOM があるとします:

この記事では、同じ最終目標を達成するために使用できる 2 つの異なる方法について説明します。つまり、最後の項目を除く各リスト項目の後にカンマを追加します。

それでは、それぞれの方法について 1 つずつ説明していきます。

方法 1: CSS を使用する

CSS を使用してリスト項目間にカンマを動的に追加する 1 つの方法は、リスト項目で ::before 擬似要素を使用することです。

各 li ::before 疑似要素内 (最初の li 子要素を除く) にカンマを追加すると、問題は解決します。

これを行うコードは -

これにより、最初の項目を除く各リスト項目の前にカンマとスペースが追加されます。最初の項目の前には何もないので、その前にコンマはありません。

方法 2: JavaScript を使用する

または、javascript または jquery を使用して、リスト項目間にカンマを動的に追加することもできます。ここでは、純粋な JavaScript を使用して、項目のリストの間にカンマを動的に追加します。

これを行うコードは -

このコードは、まず ID によってリストを選択し、次にすべてのリスト項目を取得します。次に、各項目をループして、それが最初の項目ではないかどうかを確認し、最初の項目でない場合は、項目の内容の前にカンマとスペースを追加します。

コードの最後の部分は -

以上がJavaScript で項目のリスト間にカンマを動的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。