SeouliteLab

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

카테고리 없음

jQuery를 사용한 목록의 뒤에서 두 번째 유형 요소에 새로운 내용 추가하기

Seoulite Lab 2024. 4. 12. 10:23

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

$( "ul li:nth-last-of-type(2)" ).append( "<span> - 뒤에서 두 번째!</span>" );

설명:

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

예제 2: 목록의 뒤에서 두 번째 유형 요소에 아이콘 추가하기

$( "ul li:nth-last-of-type(2)" ).append( "<i class='fa fa-check'></i>" );

설명:
이 예제는 ul 요소 아래의 뒤에서 두 번째 유형의 li 요소에 체크 아이콘을 추가합니다.

예제 3: 각 ul 요소의 뒤에서 두 번째 유형 요소에 스타일 변경하기

$( "ul li:nth-last-of-type(2)" ).css( "font-weight", "bold" );

설명:
이 예제는 각 ul 요소의 뒤에서 두 번째 유형의 li 요소의 글꼴을 굵게 변경합니다.