HOWTO · jQuery

jQuery를 선택 형제

이 튜토리얼은 jQuery에서 형제를 선택하는 방법을 보여줍니다.

작성자 Sheeraz Gul게시일 2023-06-21업데이트 2024-02-15
이 페이지의 내용

형제는 주어진 요소의 앞과 뒤에 있는 요소입니다. jQuery에는 선택하려는 형제를 기반으로 DOM 트리의 형제를 선택하는 많은 방법이 있습니다.

이러한 방법에는 다음이 포함됩니다.

  1. 형제자매()
  2. 다음()
  3. nextAll()
  4. nextUntil()
  5. 이전()
  6. prevAll()
  7. prevUntil()

이 튜토리얼은 jQuery에서 형제를 선택하는 각 방법을 보여줍니다.

siblings() 메서드를 사용하여 jQuery에서 형제 선택

siblings() 메서드는 주어진 요소의 모든 형제 요소를 선택하는 데 사용됩니다. 이 방법의 구문은 다음과 같습니다.

$(selector).siblings()

위의 구문은 단락 요소의 모든 형제를 반환합니다. 또한 선택할 요소 형제를 증폭하는 매개변수도 사용합니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

위의 코드는 단락의 형제에 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 형제

siblings 메서드를 사용하여 요소의 특정 형제를 선택할 수도 있습니다. 예를 참조하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

위의 코드는 이제 단락의 ul 형제만 선택합니다. 출력을 참조하십시오.

jQuery Siblings Select

next() 메서드를 사용하여 jQuery에서 형제 선택

jQuery의 next() 메서드는 주어진 요소의 즉각적인 next 형제를 가져오는 데 사용됩니다. 이 방법의 구문은 다음과 같습니다.

$(selector).next()

next() 메서드는 매개변수를 사용하지 않습니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

위의 코드는 단락 요소의 다음 형제를 선택하고 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 다음

nextAll() 메서드를 사용하여 jQuery에서 형제 선택

nextAll() jQuery 메서드는 주어진 요소 뒤에 있는 모든 형제를 가져옵니다. 이 방법의 구문은 다음과 같습니다.

$(selector).nextAll()

nextAll() 메소드는 매개변수를 사용하지 않습니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
    </div>
</body>
</html>

위의 코드는 nextAll 메서드를 사용하여 주어진 단락 요소의 다음 형제를 모두 선택합니다. 출력을 참조하십시오.

jQuery 다음 모두

nextUntil() 메서드를 사용하여 jQuery에서 형제 선택

nextUntil() jQuery 메서드는 특정 요소까지 주어진 요소 다음에 형제를 가져옵니다. 이 방법의 구문은 다음과 같습니다.

$(selector).nextUntil(element)

nextUntil() 메소드는 특정 요소인 하나의 매개변수를 사용합니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextUntil("h3").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

위의 코드는 heading3 요소까지 단락 요소의 다음 형제에 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 다음까지

prev() 메서드를 사용하여 jQuery에서 형제 선택

prev() jQuery 메서드는 주어진 요소의 바로 이전 형제를 가져오는 데 사용됩니다. 이 방법의 구문은 다음과 같습니다.

$(selector).prev()

prev() 메서드는 매개변수를 사용하지 않습니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").prev().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

위의 코드는 주어진 요소의 바로 이전 요소에 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 이전

prevAll() 메서드를 사용하여 jQuery에서 형제 선택

prevAll() jQuery 메서드는 주어진 요소 앞에 있는 모든 형제 요소를 가져옵니다. 이 방법의 구문은 다음과 같습니다.

$(selector).prevAll()

prevAll() 메서드는 매개변수를 사용하지 않습니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

위의 코드는 heading3 요소의 모든 이전 형제에 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 이전 모두

prevUntil() 메서드를 사용하여 jQuery에서 형제 선택

prevUntil() jQuery 메소드는 특정 요소까지 주어진 요소 이전의 형제를 가져옵니다. 이 방법의 구문은 다음과 같습니다.

$(selector).prevUntil(element)

prevUntil() 메소드는 특정 요소인 하나의 매개변수를 사용합니다. 예를 들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevUntil("p").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

위의 코드는 단락 요소까지 heading3 요소의 이전 형제에 테두리를 추가합니다. 출력을 참조하십시오.

jQuery 이전까지

작성자 소개

Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

작성자 프로필 보기
LinkedInFacebook