jquery에서 형제 노드의 콘텐츠 값을 찾는 방법

구현 단계: 1. 형제 노드(siblings(), next() 등)를 순회하는 함수를 사용하여 지정된 요소의 형제 노드를 얻습니다. 구문은 "요소 지정. 순회 함수 지정"입니다. text() 또는 html() 사용 이 함수는 선택한 노드의 콘텐츠 값을 가져오며 구문은 "sibling node.text()" 또는 "sibling node.html()"입니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.0 버전, Dell G3 컴퓨터.

jquery는 형제 노드의 콘텐츠 값을 찾습니다.

• Find 형제 노드

• 선택한 노드의 콘텐츠 값 가져오기

1단계. 형제 노드 찾기

jquery는 형제 노드를 얻기 위한 다양한 함수를 제공하며 일반적으로 7가지가 있습니다.

• siblings() 메서드, 주로 지정된 요소와 동일한 수준의 모든 형제 요소를 얻는 데 사용됨

• next() 메서드 , 주로 사용됨 지정된 요소의 다음 형제 요소를 가져오는 데 사용됨

• nextAll() 메서드, 주로 지정된 요소의 다음 형제 요소의 모든 형제 요소를 가져오는 데 사용됨

• nextUntil() 메서드, 주로 사용됨 지정된 요소의 다음 형제 요소를 얻으려면 이 형제 요소는 지정된 요소와 nextUntil() 메서드에 의해 설정된 요소 사이에 있어야 합니다.

• prev() 메서드는 주로 가져오는 데 사용됩니다. 지정된 요소의 상위 수준 형제 요소

• prevAll( ) 메서드는 주로 지정된 요소의 상위 수준에 있는 모든 형제 요소를 가져오는 데 사용됩니다.

• prevUntil() 메서드는 주로 지정된 요소의 이전 형제 요소입니다. 이 형제 요소는 지정된 요소와 prevUntil() 메서드 사이에 있어야 합니다. 요소 사이에 요소를 설정하세요

예: 선택한 요소 h2의 다음 형제 노드를 가져옵니다.

$("h2").next()

2단계. 선택한 노드의 콘텐츠 값 가져오기

• text() 메서드 사용 선택한 노드의 텍스트 콘텐츠 설정

예 1: 다음 형제 노드의 콘텐츠 값 가져오기

	
		
		
		
		
	
	
		
div (父)
			
p（兄弟元素）
			span（兄弟元素）
			
h2（本元素）
			
h3（兄弟元素）
			
p（兄弟元素）
		
		获取兄弟节点的内容值
	

예제 2: 모든 형제 노드의 콘텐츠 값 가져오기

$(document).ready(function() {
	$("button").click(function() {
		$("h2").siblings().css("color","red");
		var con=$("h2").siblings().text();
		console.log(con);
	});
});

• html() 사용 선택한 노드의 콘텐츠 설정(innerHTML)

예: 다음의 콘텐츠 값 가져오기 이전 형제 노드

$(document).ready(function() {
	$("button").click(function() {
		$("h2").next().css("color","red");
		var con=$("h2").next().html();
		console.log(con);
	});
});

[추천 학습: jQuery 비디오 튜토리얼, 웹 프론트엔드 비디오]

위 내용은 jquery에서 형제 노드의 콘텐츠 값을 찾는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!