SeouliteLab

jQuery를 사용한 목록의 두 번째 자식 요소에 새로운 내용 추가하기 본문

프로그래밍

jQuery를 사용한 목록의 두 번째 자식 요소에 새로운 내용 추가하기

Seoulite Lab 2024. 4. 12. 10:21

아래는 jQuery를 사용하여 목록(<ul>)의 두 번째 자식 요소(<li>)에 새로운 내용(<span> - 2nd!</span>)을 추가하는 예제입니다.

$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );

설명:

  1. $() 함수를 사용하여 jQuery 선택자를 지정합니다.
  2. "ul li:nth-child(2)"는 ul 요소 아래의 두 번째 자식 li 요소를 선택합니다.
  3. append() 함수를 사용하여 선택된 li 요소에 새로운 내용인 <span> - 2nd!</span>을 추가합니다.

예제 2: 목록의 각 두 번째 자식 요소에 아이콘 추가하기

$( "ul li:nth-child(2n)" ).append( "<i class='fa fa-star'></i>" );

설명:
이 예제는 ul 요소 아래의 각 두 번째 자식 li 요소에 별 모양의 아이콘을 추가합니다.

예제 3: 첫 번째 ul 요소의 두 번째 자식 요소에 스타일 변경하기

$( "ul:first-child li:nth-child(2)" ).css( "color", "blue" );

설명:
이 예제는 첫 번째 ul 요소의 두 번째 자식 li 요소의 글꼴 색상을 파란색으로 변경합니다.