집 > 기사 > 웹 프론트엔드 > Jquery에서 하위 요소를 얻는 방법

Jquery에서 하위 요소를 얻는 방법

DOM 작업에 jQuery를 사용할 때 다음 단계를 위해 요소의 하위 요소를 가져와야 하는 경우가 많습니다. 이 기사에서는 jQuery를 사용하여 하위 요소를 가져오는 방법을 자세히 설명합니다.

1. jQuery 하위 요소 선택기

jQuery에서는 하위 요소 선택기를 사용하여 하위 요소를 가져올 수 있습니다. 하위 요소 선택기는 요소의 직접 하위 요소를 선택하는 ">" 기호를 사용합니다.

예를 들어, 다음 코드를 사용하여 ID가 부모인 요소의 모든 직계 하위 요소를 가져올 수 있습니다.

$("#parent > *")

여기서 "*" 기호는 모든 요소를 나타냅니다.

부모 요소의 ID가 있는 직계 자식 요소에서 클래스가 자식인 요소를 가져오려면 다음 코드를 사용할 수 있습니다.

$("#parent > .child")

여기서 "."은 클래스 선택기를 나타냅니다.

2. jQuery 하위 요소 탐색 방법

jQuery는 요소의 하위 요소를 탐색하는 일련의 메소드를 제공합니다.

children() 메서드는 지정된 요소의 모든 직계 자식을 반환합니다. 모든 하위 요소를 반환하지는 않습니다.

예를 들어, 다음 코드는 ID가 부모 요소인 모든 요소의 모든 직계 하위 요소를 반환할 수 있습니다.

$("#parent").children()

상위 요소 ID를 가진 직계 하위 요소 중에서 클래스가 child인 요소를 가져오려면 다음을 수행하세요. 다음 코드를 사용할 수 있습니다.

$("#parent").children(".child")

find() 메서드는 지정된 요소의 하위 요소를 반환합니다. 직계 자식뿐만 아니라 지정된 요소의 모든 하위 요소를 반환합니다.

예를 들어 다음 코드는 ID가 부모인 요소에서 클래스가 child인 모든 하위 요소를 반환할 수 있습니다.

$("#parent").find(".child")

next() 메서드는 지정된 요소의 다음 형제 요소를 반환합니다. 다음 형제 요소가 없으면 빈 jQuery 객체가 반환됩니다.

예를 들어, 다음 코드는 ID가 부모인 요소의 다음 형제 요소를 반환할 수 있습니다.

$("#parent").next()

prev() 메서드는 지정된 요소의 이전 형제 요소를 반환합니다. 이전 형제 요소가 없으면 빈 jQuery 객체가 반환됩니다.

예를 들어 다음 코드는 ID가 상위인 요소의 이전 형제 요소를 반환할 수 있습니다.

$("#parent").prev()

siblings() 메서드는 지정된 요소의 모든 형제 요소를 반환합니다. 형제 요소는 지정된 요소와 동일한 상위 요소를 갖는 모든 요소입니다.

예를 들어 다음 코드는 ID가 부모인 요소의 모든 형제 요소를 반환할 수 있습니다.

$("#parent").siblings()

first() 메서드는 지정된 요소의 첫 번째 하위 요소를 반환합니다.

예를 들어 다음 코드는 ID가 상위인 요소의 첫 번째 하위 요소를 반환할 수 있습니다.

$("#parent").children().first()

last() 메서드는 지정된 요소의 마지막 하위 요소를 반환합니다.

예를 들어 다음 코드는 ID가 상위인 요소의 마지막 하위 요소를 반환할 수 있습니다.

$("#parent").children().last()

3. 샘플 코드

다음은 jQuery를 사용하여 하위 요소를 가져오는 방법을 설명하는 간단한 샘플 코드입니다. :




    
    jQuery获取子级元素示例
    


    
        子元素1
        子元素2
        子元素3

위는 jQuery를 사용하여 하위 요소를 가져오는 방법에 대한 방법 및 샘플 코드입니다. 하위 요소를 조작해야 하는 경우 실제 상황에 따라 적절한 방법을 선택하십시오.

위 내용은 Jquery에서 하위 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：