Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery를 사용한 목록의 두 번째 자식 요소에 새로운 내용 추가하기 본문
아래는 jQuery를 사용하여 목록(<ul>
)의 두 번째 자식 요소(<li>
)에 새로운 내용(<span> - 2nd!</span>
)을 추가하는 예제입니다.
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
설명:
$()
함수를 사용하여 jQuery 선택자를 지정합니다."ul li:nth-child(2)"
는 ul 요소 아래의 두 번째 자식 li 요소를 선택합니다.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 요소의 글꼴 색상을 파란색으로 변경합니다.
'프로그래밍' 카테고리의 다른 글
jQuery를 사용한 두 번째 형제 요소의 스타일 변경과 클래스 추가 (0) | 2024.04.12 |
---|---|
jQuery를 사용한 목록의 뒤에서 두 번째 자식 요소에 새로운 내용 추가하기 (0) | 2024.04.12 |
jQuery의 :not() 선택자를 활용한 입력 요소 스타일 변경 (0) | 2024.04.12 |
jQuery의 다음 형제 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 인접 형제 선택자 활용하기 (0) | 2024.04.12 |