Maison > Article > interface Web > Exemple d'affichage des sélecteurs précédent, suivant et frères et sœurs dans jquery

Exemple d'affichage des sélecteurs précédent, suivant et frères et sœurs dans jquery

巴扎黑original: 2017-06-22 14:34:071786parcourir

Les trois méthodes prev, next et siblings dans js font référence aux frères previous, next et autres. Jetons un coup d'œil aux exemples d'éléments prev, next et siblings dans jquery. Si vous êtes intéressé, renseignez-vous auprès de l'éditeur.

Lorsque nous voulons obtenir les éléments adjacents d'un élément dans jquery, nous pouvons utiliser trois commandes :

next() : utilisée pour obtenir l'élément frère suivant.
prev() : utilisé pour obtenir l'élément frère précédent.
siblings() : utilisé pour obtenir tous les éléments frères et sœurs.

Cette fois, nous allons récupérer les éléments frères et sœurs de l'élément inférieur, y compris le frère précédent, le frère suivant et les autres frères. Afin de simplifier le fonctionnement et de prendre en compte l'utilisation quotidienne, nous prenons uniquement les éléments frères du premier élément de l'ensemble d'éléments.

1. thisContrôle d'accès

$.fn._access = function(){
 if (this.length) return callback.call(this);
 else return this;
};

Le rappel n'est exécuté que lorsque la longueur de la collection d'éléments est supérieure à 0, sinon ceci est renvoyé. Nous convenons que les paires de méthodes et de propriétés commençant par un trait de soulignement sont des méthodes privées et des propriétés privées.

2. précédent, le frère précédent

/**
 * 获取当前元素的前一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.prev = function() {
    return this._access(function() {
        return $(this[0].previousElementSibling);
    });
};

3 ensuite, le frère suivant

/**
 * 获取当前元素的后一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.next = function() {
    return this._access(function() {
        return $(this[0].nextElementSibling);
    });
}

/**
 * 获取当前元素的兄弟元素集合
 * @param {String} selector 选择器，可以为空
 * @return new this
 * @version 1.0
 * 2013年12月29日2:14:20
 */
$.fn.siblings = function(selector) {
    return this._access(function() {
        var element = this[0],
            children = element.parentElement.children,
            ret = [],
            i;
        this.each.call(children, function() {
            if (!this.isEqualNode(element)) {
                if (selector) {
                    _matchesSelector(this, selector) && ret.push(this);
                } else ret.push(this);
            }
        });
        return $(ret);
    });
};

Pour obtenir les autres éléments frères d'un élément, il existe 2 méthodes :

Récupérer tour à tour l'élément frère précédent de l'élément, array , puis inversez-le, puis obtenez à tour de rôle l'élément frère suivant de l'élément ;
obtenez les éléments enfants du parent de l'élément, puis parcourez une fois pour supprimer l'élément actuel.
La deuxième méthode est choisie ici, parmi laquelle jquery est la première méthode choisie.

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
　 display:block;
　 width:80px;
　 height:80px;
　 margin:5px;
　 background:#bbffaa;
　 float:left;
　 font-size:14px;
}
div#small {
　 width:60px;
　 height:25px;
　 font-size:12px;
　 background:#fab;
}
</style>
<script src="" > </script>
</head>
<body>
<div>div (doesn&#39;t match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div > </div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script> 
//　 ~ 代表id"prem"后面的div都要变 
$("#prev ~ div").css("border", "3px groove blue"); 
// + 代表id"prev"后面的第一个div要变 
$("#prev + div").css("border", "3px groove blue"); 
</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de la fonction de traversée siblings() dans jqueryArticle suivant：Explication détaillée de l'utilisation de la fonction de traversée siblings() dans jquery

Articles Liés

Voir plus