Rückgabe aller DOM-Elemente mit einer wiederverwendbaren Funktion

Ich möchte meine 4 Anker-Tags in meiner HTML-Datei, um ihre CSS-Eigenschaften gleichzeitig ändern. So habe ich eine wiederverwendbare Funktion namens query() in meiner JS-Datei erstellt, um den erstaunlichen Dollarzeichen-DOM-Auswahlmechanismus in jQuery zu imitieren, wobei einfach JS verwendet wird. Innerhalb der query()-Funktion gibt es eine Schleife, die die Länge des elem (DOM-Elemente) -Parameters überprüft und sie anwendet, um den Index jedes eingegebenen DOM-Elements abzurufen und zurückzugeben. Ich war überrascht, dass es nur das erste Element zurückgegeben hat.Rückgabe aller DOM-Elemente mit einer wiederverwendbaren Funktion

Ich glaube, das Problem ist mit dem Anwendungsbereich von return. Ich hoffe, dass jemand mit meinem Code auf das Falsche hinweisen oder korrigieren kann. Danke im Voraus.

Quelle

2017-02-22 Anonymous

Sie die Funktion nach der ersten Schleife zu stoppen. Löschen Sie das Schlüsselwort return. –

Wenn Sie auf diese Weise "return" verwenden, wird die Funktion von der Funktion und nicht wie erwartet beendet. Stattdessen möchten Sie möglicherweise jedes Element zu einem Array hinzufügen und dieses Array dann zurückgeben. – evolutionxbox

Sie geben das 'i' Indexelement zurück, das 0 Element ist, das Sie herausnehmen [] –

Sie können das Schlüsselwort return nicht in der Schleife for verwenden, da Sie die Funktion nach dem ersten Zyklus beenden werden.

Ich empfehle Ihnen, ein neues Array zu erstellen und jedes gefundene Element in das Array zu schieben, um darüber zu manipulieren.

function query(elem, prop, value) { 
 
    var elems = document.getElementsByTagName(elem); 
 
    var result = []; 
 

 
    for (var i = 0; i < elems.length; i++) { 
 
    result.push(elems[i]); 
 
    result[i].style[prop] = value; 
 
    } 
 
} 
 

 
query('h1', 'color', 'red');

.box { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green; 
 
    margin: 5px; 
 
}

<div class='box'></div> 
 
<div class='box'></div> 
 
<div class='box'></div> 
 

 
<h1>Hello</h1> 
 
<h1>Hello</h1> 
 
<h1>Hello</h1>

Sie können auch forEach() Funktion statt for Schleife, für ein schnelleres Ergebnis verwenden verwenden.

function query(elem) { 
 
    var result = []; 
 
    document.querySelectorAll(elem).forEach(v => result.push(v)); 
 
    console.log(result); 
 
} 
 

 
query('div');

<div class='box'></div> 
 
<div class='box'></div> 
 
<div class='box'></div>

Quelle

2017-02-22 11:35:38

Vielen Dank für diesen tollen Tipp :) –

aber wie kann ich jedes Element zurückgeben, um ihre Stile zu ändern? Weil ich versuchte, die 'console.log' durch' return result' zu ersetzen und nichts änderte –

was, wenn ich den Stil dieser drei ändern möchte? –

Ich schlage vor, Sie getElementsByTagName DOM verwenden, um alle dom Elemente nicht iterieren Ihre Funktion ist prety viel wie diese native Funktion

document.getElementsByTagName (elem);

Das Problem mit Ihrer Funktion ist das Zurückgeben einer HTMLCollection, und Sie können Stil nicht anwenden.

Ich schlage vor, das zum Beispiel:

function query(elem, callback) { 
    var elems = document.getElementsByTagName(elem); 
    for(var i; i < elems.lenght; i++){ 
     callback(elems[i]); 
    } 
} 

query('a', function(a){ 
    a.style.color = 'yellow'; 
})

Quelle

2017-02-22 11:44:26

' getElementsByTagName'? Was, wenn ich Klassennamen oder IDs wie '.Element oder # Element? –

Sie können eine differents Funktionen erstellen oder dies als ein Parameter übergeben, schlage ich vor, weil weniger Leistungsschleife über alle DOM-Elemente ist. –

-1

NodeList.prototype.css = function (css) { 
 
\t for (var i=0; i<this.length; i++) 
 
\t \t for (var j in css) 
 
\t \t \t this[i].style[j] = css[j] 
 
} 
 
document.querySelectorAll('a').css({ 
 
\t 'color' : 'yellow', 
 
\t 'background-color' : 'black' 
 
})

<a href="">The Link</a>

Quelle

2017-02-25 10:55:25 Levon

Rückgabe aller DOM-Elemente mit einer wiederverwendbaren Funktion

Antwort

Verwandte Themen