jQuery Geschwister auswählen

  2. How-To's
  3. jQuery-Anleitungen
  4. jQuery Geschwister auswählen
Sheeraz Gul 15 Februar 2024
jQuery jQuery Sibling
  1. Verwenden Sie die Methode siblings(), um ein Geschwister in jQuery auszuwählen
  2. Verwenden Sie die Methode next(), um ein Geschwister in jQuery auszuwählen
  3. Verwenden Sie die Methode nextAll(), um ein Geschwister in jQuery auszuwählen
  4. Verwenden Sie die Methode nextUntil(), um ein Geschwister in jQuery auszuwählen
  5. Verwenden Sie die Methode prev(), um ein Geschwister in jQuery auszuwählen
  6. Verwenden Sie die Methode prevAll(), um ein Geschwister in jQuery auszuwählen
  7. Verwenden Sie die Methode prevUntil(), um ein Geschwister in jQuery auszuwählen
jQuery Geschwister auswählen

Die Geschwister sind die Elemente, die vor und nach einem bestimmten Element stehen. jQuery hat viele Methoden, um Geschwister eines DOM-Baums auszuwählen, basierend darauf, welches Geschwister wir auswählen möchten.

Zu diesen Methoden gehören:

  1. Geschwister()
  2. weiter()
  3. nächstes()
  4. weiterBis()
  5. vorher ()
  6. prevAll()
  7. prevBis()

Dieses Tutorial demonstriert jede Methode zum Auswählen eines Geschwisters in jQuery.

Verwenden Sie die Methode siblings(), um ein Geschwister in jQuery auszuwählen

Die Methode siblings() wird verwendet, um alle Geschwisterelemente des angegebenen Elements auszuwählen; Die Syntax für diese Methode ist unten.

$(selector).siblings()

Die obige Syntax gibt alle Geschwister des Absatzelements zurück; Es benötigt auch einen Parameter, der verstärkt, welches Geschwisterelement ausgewählt werden soll. Versuchen wir es an einem Beispiel.

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

Der obige Code fügt den Geschwistern des Absatzes einen Rahmen hinzu. Siehe die Ausgabe:

jQuery-Geschwister

Wir können auch die Methode Geschwister verwenden, um ein bestimmtes Geschwister eines Elements auszuwählen. Siehe das Beispiel:

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

Der obige Code wählt jetzt nur das Geschwister ul des Absatzes aus. Siehe die Ausgabe:

jQuery-Geschwister auswählen

Verwenden Sie die Methode next(), um ein Geschwister in jQuery auszuwählen

Die Methode next() von jQuery wird verwendet, um das unmittelbare nächste Geschwister des angegebenen Elements zu erhalten. Die Syntax für diese Methode ist unten.

$(selector).next()

Die Methode next() nimmt keine Parameter entgegen; Versuchen wir es an einem Beispiel.

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

Der obige Code wählt das nächste gleichgeordnete Element des Absatzelements aus und fügt ihm einen Rahmen hinzu. Siehe die Ausgabe:

jQuery Weiter

Verwenden Sie die Methode nextAll(), um ein Geschwister in jQuery auszuwählen

Die jQuery-Methode nextAll() holt alle Geschwister nach dem angegebenen Element. Die Syntax für diese Methode ist unten.

$(selector).nextAll()

Die Methode nextAll() nimmt keine Parameter entgegen; Versuchen wir es an einem Beispiel.

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

Der obige Code verwendet die Methode nextAll, um alle nächsten Geschwister des angegebenen Absatzelements auszuwählen. Siehe die Ausgabe:

jQuery als Nächstes

Verwenden Sie die Methode nextUntil(), um ein Geschwister in jQuery auszuwählen

Die jQuery-Methode nextUntil() holt die Geschwister nach dem angegebenen Element bis zu einem bestimmten Element. Die Syntax für diese Methode ist unten.

$(selector).nextUntil(element)

Die Methode nextUntil() nimmt einen Parameter, ein bestimmtes Element; Versuchen wir es an einem Beispiel.

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

Der obige Code fügt den Rahmen zu den nächsten Geschwistern des Absatzelements bis zum Element heading3 hinzu. Siehe die Ausgabe:

jQuery Weiter bis

Verwenden Sie die Methode prev(), um ein Geschwister in jQuery auszuwählen

Die jQuery-Methode prev() wird verwendet, um das unmittelbar vorherige Geschwister des angegebenen Elements zu erhalten. Die Syntax für diese Methode ist unten.

$(selector).prev()

Die Methode prev() nimmt keine Parameter entgegen; Versuchen wir es an einem Beispiel.

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

Der obige Code fügt dem unmittelbar vorherigen Element des angegebenen Elements einen Rahmen hinzu. Siehe die Ausgabe:

jQuery Zurück

Verwenden Sie die Methode prevAll(), um ein Geschwister in jQuery auszuwählen

Die jQuery-Methode prevAll() ruft alle Geschwister vor dem angegebenen Element ab. Die Syntax für diese Methode ist unten.

$(selector).prevAll()

Die Methode prevAll() akzeptiert keine Parameter; Versuchen wir es an einem Beispiel.

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

Der obige Code fügt den Rahmen zu allen vorherigen Geschwistern der heading3-Elemente hinzu. Siehe die Ausgabe:

jQuery Zurück Alle

Verwenden Sie die Methode prevUntil(), um ein Geschwister in jQuery auszuwählen

Die jQuery-Methode prevUntil() ruft die Geschwister vor dem angegebenen Element bis zu einem bestimmten Element ab. Die Syntax für diese Methode ist unten.

$(selector).prevUntil(element)

Die Methode prevUntil() nimmt einen Parameter, ein spezifisches Element; Versuchen wir es an einem Beispiel.

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

Der obige Code fügt den Rand zu den vorherigen Geschwistern des heading3-Elements bis zum Absatzelement hinzu. Siehe die Ausgabe:

jQuery Zurück Bis

Autor: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

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.

LinkedIn Facebook