Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 보험
- 심장질환
- 웹개발
- 변환
- 납입
- 추가납입
- Vue.js
- 프론트엔드
- 교보
- 자바스크립트
- 인출수수료
- Java
- 수수료
- 프로그래밍
- 사망
- jQuery
- 가입
- 코딩
- javascript
- 보험료
- 문자열
- 파이썬
- 급성심근경색증
- 리스트
- 뇌출혈
- 교보생명
- python
- PythonProgramming
- 특약
- 중도인출
Archives
- Today
- Total
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 |