Heim > Artikel > Web-Frontend > Beispielanzeige der Selektoren „prev“, „next“ und „siblings“ in jquery

Beispielanzeige der Selektoren „prev“, „next“ und „siblings“ in jquery

巴扎黑Original: 2017-06-22 14:34:071787Durchsuche

Die drei Methoden „prev“, „next“ und „siblings“ in js beziehen sich auf die Beispiele „prev“, „next“ und „siblings“ der DOM-Elemente in jquery Wenn Sie interessiert sind, informieren Sie sich beim Herausgeber.

Wenn wir die angrenzenden Elemente eines Elements in jquery abrufen möchten, können wir drei Befehle verwenden:

next(): wird verwendet, um das nächste Geschwisterelement abzurufen.
prev(): wird verwendet, um das vorherige Geschwisterelement abzurufen.
siblings(): wird verwendet, um alle Geschwisterelemente abzurufen.

Dieses Mal werden wir die Geschwisterelemente des unteren Elements erhalten, einschließlich des vorherigen Bruders, des nächsten Bruders und anderer Brüder. Um die Bedienung zu vereinfachen und den täglichen Gebrauch zu berücksichtigen, verwenden wir nur die Geschwisterelemente des ersten Elements im Elementsatz.

1. dieseZugriffskontrolle

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

Der Rückruf wird nur ausgeführt, wenn die Länge der Elementsammlung größer als 0 ist, andernfalls wird diese zurückgegeben. Wir sind uns einig, dass die Paare aus Methoden und Eigenschaften, die mit einem Unterstrich beginnen, private Methoden und private Eigenschaften sind.

2. Vorheriger, der vorherige Bruder

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

3. Der nächste Bruder

/**
 * 获取当前元素的后一个兄弟元素
 * @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);
    });
};

Um andere Geschwisterelemente eines Elements abzurufen, gibt es zwei Methoden:

Holen Sie sich der Reihe nach das vorherige Geschwisterelement des Elements, Array , und dann umkehren, dann das nächste Geschwisterelement des Elements abrufen
die untergeordneten Elemente des übergeordneten Elements abrufen und dann einmal durchlaufen, um das aktuelle Element zu entfernen.
Hier wird die zweite Methode ausgewählt, wobei jquery die erste ausgewählte Methode ist.

Beispiel

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

Das obige ist der detaillierte Inhalt vonBeispielanzeige der Selektoren „prev“, „next“ und „siblings“ in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der Traversalfunktion siblings() in jqueryNächster Artikel：Detaillierte Erläuterung der Verwendung der Traversalfunktion siblings() in jquery

In Verbindung stehende Artikel

Mehr sehen