JavaScript의 항목 목록 사이에 쉼표를 동적으로 추가하는 방법은 무엇입니까?

CSS "::before" 의사 요소를 사용하여 첫 번째 항목을 제외한 각 목록 항목 앞에 쉼표를 동적으로 추가할 수 있습니다. 목록 항목을 대상으로 하고 "content" 속성을 사용하면 목록 항목의 내용 앞에 쉼표를 삽입할 수 있습니다. 추가적으로 ":not(:first-child)" 의사 클래스를 사용하여 첫 번째가 아닌 목록 항목만 쉼표로 추가되도록 할 수 있습니다.

다음과 같은 HTML DOM이 있다고 가정해 보겠습니다.

으아악

이 문서에서는 동일한 최종 목표를 달성하는 데 사용할 수 있는 두 가지 방법에 대해 설명합니다. 즉, 마지막 항목을 제외한 모든 목록 항목 뒤에 쉼표를 추가하는 것입니다.

그럼, 각 방법을 하나씩 논의해 보도록 하겠습니다.

방법 1: CSS 사용

CSS를 사용하여 목록 항목 사이에 쉼표를 동적으로 추가하는 한 가지 방법은 목록 항목에 ::before 의사 요소를 사용하는 것입니다.

의사 요소(첫 번째 li 하위 제외) 앞에 각 li :: 내에서 쉼표를 추가하면 문제가 해결됩니다.

이를 수행하는 코드는 -

입니다. 으아악

이렇게 하면 첫 번째 항목을 제외한 각 목록 항목 앞에 쉼표와 공백이 추가됩니다. 첫 번째 항목 앞에는 아무것도 없으므로 앞에는 쉼표가 없습니다.

방법 2: JavaScript 사용

또는 javascript 또는 jquery를 사용하여 목록 항목 사이에 쉼표를 동적으로 추가할 수 있습니다. 여기서는 순수 JavaScript를 사용하여 항목 목록 사이에 쉼표를 동적으로 추가합니다.

이 작업을 수행하는 코드는 -

입니다. 으아악

이 코드는 먼저 ID별로 목록을 선택한 다음 모든 목록 항목을 가져옵니다. 그런 다음 각 항목을 반복하여 첫 번째 항목이 아닌지 확인하고, 그렇지 않은 경우 항목 내용 앞에 쉼표와 공백을 추가합니다.

예

마지막 코드는 -

입니다. 으으으으

위 내용은 JavaScript의 항목 목록 사이에 쉼표를 동적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!