HOWTO · jQuery

jQuery Select 兄弟

このチュートリアルでは、jQuery で兄弟を選択する方法を示します。

著者 Sheeraz Gul公開日 2023-06-21更新日 2024-02-15
このページの内容

兄弟は、特定の要素の前後にある要素です。 jQuery には、選択したい兄弟に基づいて DOM ツリーの兄弟を選択する方法が多数あります。

これらの方法には次のものがあります。

  1. 兄弟()
  2. 次へ
  3. nextAll()
  4. nextUntil()
  5. prev()
  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兄弟選択

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 Next All

nextUntil() メソッドを使用して jQuery で兄弟を選択する

nextUntil() jQuery メソッドは、指定された要素から特定の要素までの兄弟を取得します。 このメソッドの構文は次のとおりです。

$(selector).nextUntil(element)

nextUntil() メソッドは、1つのパラメーター、特定の要素を受け取ります。 例を試してみましょう。

<!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() メソッドは、1つのパラメーター、特定の要素を受け取ります。 例を試してみましょう。

<!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