Méthode jQuery traversal prev()

jQuery est un objet de collection. Si vous souhaitez trouver rapidement l'ensemble d'éléments des éléments frères immédiatement précédents de chaque élément dans l'ensemble d'éléments spécifié, vous pouvez utiliser la méthode prev()

pour comprendre le Relation de recherche de nœud :

Ce qui suit est l'élément li bleu de class="item-2", le nœud rouge est son nœud frère précédent

<ul class="level-3" >

  <li class="item-1">1</li>
  <li class="item-2">2</li>
  < li class="item- 3">3</li>
</ul>

prev() aucun paramètre

Obtenir immédiatement un ensemble contenant les éléments correspondants adjacent à chaque élément L'ensemble des éléments de l'élément frère précédent

Remarque : jQuery est un objet de collection, donc prev est l'élément frère précédent qui correspond à chaque élément de la collection

sélection de la méthode prev() Acceptez le même type d'expressions de sélection

De même, comme jQuery est un objet de collection, il peut être nécessaire de filtrer cet objet de collection pour trouver l'élément cible, il est donc autorisé à passer un sélecteur expression< L'ajout d'un sélecteur dans 🎜>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 150px;
    }
    
    .left div {
        width: 150px;
        height: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    a {
        display: block;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>prev方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击:prev无参数</button>
    <button>点击:prev传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         $('.item-2').prev().css('border', '1px solid red');
    })
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出最后一个,加上蓝色的边
       $('.item-3').prev(':last').css('border', '1px solid blue');
    })
    </script>

</body>

</html>

prev() consiste à filtrer davantage la collection des éléments immédiatement précédents, tels que : eq(1), first, last, :contains("3") , has ("p"), ajoutez un sélecteur qui répond à vos besoins de filtrage. C'est la même chose que next(), mais leurs fonctions sont différentes

.

Formation continue
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 100px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } a { display: block; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>prev方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>点击:prev无参数</button> <button>点击:prev传递选择器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').prev().css('border', '1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-2的li //然后筛选出最后一个,加上蓝色的边 $('.item-3').prev(':last').css('border', '1px solid blue'); }) </script> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!